vuex-mappers
Component agnostic Vuex mappers.
Usage
Install it via npm:
$ npm install vuex-mappers
There are four mappers in vuex-mappers: state
, getter
, mutation
and action
. They have similar API with Vuex's mapXXX
helpers but are Vue component agnostic and return only one bound function.
For example, imagine following store:
Vue const store = state: count: 0 getters: statecount * 2 mutations: { statecount += amount } actions: { }
Then you declare store mappers:
const count = storeconst double = storeconst inc = storeconst incAsync = store console // store.state.countconsole // store.getters.double // store.commit('inc', 123) // store.dispatch('incAsync', 123)
You may want to pass namespace for the mapper:
const store = modules: foo: namespaced: true state: message: 'Hello' // You can specify namespace value to 1st argumentconst message = storeconsole // -> Hello
state
mapper also receive a function which receives store state and getters:
const store = state: count: 1 getters: statecount * 2 const value = store console // -> 3
mutation
and action
mapper can receive a function for more flexible mapping:
const store = state: count: 0 mutations: { statecount += amount } actions: { } const incDouble = store const incDoubleAsync = store
License
MIT