@ferrugemjs/v3rtigo v3.0.7

V3rtigo

V3rtigo is a state management library for Ferrugemjs applications.

install

npm install v3rtigo --save

usage

create a store

eg. stores/count.js

import { Store } from '@ferrugemjs/v3rtigo';

class CountStore extends Store{
    constructor(){
        super();
        this.state = 1;
    }
    public increment(){
        this.setState( this.getState() + 1 );
    }
}

export default new CountStore();

import store into component

eg. app/hello-world.js

import countStore from "../stores/count";

export class HelloWorld{
  get count(){
    return countStore.getState();
  }
  incrementHandler(){
    countStore.increment();
  }
  storeChangeHandler(){
    // react to change
  }
}

connect-provider componente

eg. app/hello-world.html

<template>
  <require from="@ferrugemjs/v3rtigo as v3r" type="namespace"/>
  <require from="../stores/count as countStore" type="script"/>
  <div>
    <h4>${this.count}</h4>
    <button click.trigger="this.incrementHandler"/>
    <v3r:connect-provider
      stores="${[countStore.default]}"
      store-change.handler="this.storeChangeHandler"
    />
  </div>
</template>

With commonjs

const v3rtigo = require('@ferrugemjs/v3rtigo/dist/commonjs/store');

class CountStore extends v3rtigo.Store{
  
}
export default new CountStore();

• stores : a list of stores which will be connected (obrigatory).

Store methods

dispatch

let payload = {desc: 'a basic info!'};
store.dispatch('storeMethod', payload);
store.dispatch({type: 'storeMethod' , payload});

subscribe

store.subscribe('storeMethod', payload => {
  console.log('subscribe working', payload);
});

unsubscribe

let unsub = store.subscribe('storeMethod', payload => {
  console.log('subscribe working once time ', payload);
  unsub();
});

emit (it's a store protected method)

...
  save(item){
    ...
    this.emit('item:saved', item);
  }
...