simple-state-store

Simple store with events

var Store = require('simple-state-store');

var store = new Store({
    sidebar: {
        users: [
            {id: 1, name: 'user1'},
            {id: 2, name: 'user2'},
            {id: 3, name: 'user3'}
        ]
    },
    form: {
        user_id: null
    }
});

store.on('move-item', 'sidebar.users', function (e) {
    console.log('User moved from ' + e.curIndex + ' to ' + e.newIndex);
});

store.on('change', 'form.user_id', function (e) {
    console.log('Open form with user ' + store.getItem('sidebar.users', {id: e.newValue}).name);
});

store.moveItem('sidebar.users', {id: 3}, 0);

store.set('form.user_id', 2);

Output

User moved from 2 to 0
Open form with user user2

Install

npm i simple-state-store

bower i simple-state-store

Lib will look for CommonJS or AMD or will add global class called SimpleStore.

Constructor

new SimleStore([state,] [options])

Constructor options

Any option from simple-diff

Properties

.state

Holds current state of the store.

.options

Holds options passed to the constructor.

Methods

.get(path)

• {String|Array} path - path to property in store state.

Returns data for given path. Path can be as dots divided string like 'prop1.prop2' or an array ['prop1', 'prop2']. You can use object in array path like ['prop1', {id: 2}, 'name'] which means that prop1 is an array and object {id: 2} should be replaced with index of item which match this object.

.set([path,] data)

• {String|Array} path - path to property in store state. If you want to change root state you can use or empty string or empty array or just skip this argument like .set(newState)
• {*} data - new data for given path

When you call it with object it will look deeply into it and compare with old object in given path and will trigger event not once but for all changed deep properties. So you can modify properties in same object like this

store.set('prop1.prop2.name', 'Jack');
store.set('prop1.prop2.age', 30);
// or
store.set('prop1.prop2', {
    name: 'Jack',
    age: 30
});

.remove(path)

• {String|Array} path - path to property in store state.

Removes property in state and triggers remove event.

.getIdProp([path])

• {String|Array} path - path to property in store state.

Will return name of id property by comparing your path with store config

var store = new SimpleStateStore({list: [], user: {friends: []}}, {
    idProp: "_id", // default is "id"
    idProps: {
        'user.friends': 'cid',
        'user.friends.*.followers': 'id',
    }
});

store.getIdProp(); // => "_id"
store.getIdProp('list'); // => "_id"
store.getIdProp('user.friends'); // => "cid"
store.getIdProp('user.friends.*.followers'); // => "id"
store.getIdProp('user.friends.1.followers'); // => "id"
store.getIdProp('user.friends.*.followers.*.likes'); // => "_id"

.on(events, path, callback)

• {String} events - space divided events names
• {String|Array} path - path to property in store state. Also you can use * in path which will match any property name.
• {Function} callback - observer function

.off([events,] [path,] [callback])

Regular off function to remove observers.

• .off(events) - remove all observers of given space divided events names
• .off(events, path) - remove all observers of given event name in given path
• .off(events, path, callback) - remove exact observer
• .off(pathAsArray) - remove all events of given path
• .off(pathAsArray, callback) - remove exact observer from all events of given path

.trigger(event, path, [data1, ...])

• {String|Object} event - event name or event object with structure like {type: 'event-name', path: array || string}. If event object given then all arguments passed to this method will go to observers.
• {String|Array} path - path to property in store state.
• {*} data1 - any data for observers

.getItem(path, props)

Find object by given props in array by given path.

• {String|Array} path - path to array.
• {Object} props - criteria props to find an object.

.getIndex(path, props)

Find object index by given props in array by given path.

• {String|Array} path - path to array.
• {Object} props - criteria props to find object index.

.addItem(path, item, [index])

Shortcut for .push(item) or .splice(index, 0, item)

• {String|Array} path - path to array.
• {*} item - any data for new array item.
• {Number} index - index to insert item in array.

.removeItem(path, indexOrProps)

Shortcut for .splice(index, 1)

• {String|Array} path - path to array.
• {Number|Object} indexOrProps - index or props to find item index.

.moveItem(path, indexOrProps, newIndex)

Will change position of item in array by given path

• {String|Array} path - path to array.
• {Number|Object} indexOrProps - index or props to find item index.
• {Number} newIndex - new item index.