vuex-models
This package is aims to simplify v-model
usage with your vuex state, by providing getter/action/mutation/state
generator and mapper, that generates v-model
compatible computed properties.
Installation
Just use npm:
npm i --save vuex-models
Usage
Using vuex-models is a dead simple - first you need to generate store fields like this:
// your imports
import { genVuexModels } from 'vuex-models'
// Vue.use(Vuex), etc
/*
First argument is an array of generated field names
Second optional argument - state attribute name,
where generated fields will be stored their states
*/
// models with initial state values
const models = genVuexModels({
foo: 'defaultValueForFoo',
bar: 'defaultValueForBar'
}, 'customField') // By default: Vxm
const store = new Vuex.Store({
...models
});
/*
Vuex state becomes to:
{
customField: {
foo: 'defaultValueForFoo',
bar: 'defaultValueForBar'
}
}
*/
export default store
Then, in your vue components you can map computed properties by using mapVuexModels
:
import { mapVuexModels } from 'vuex-models'
export default {
computed: {
/*
creating computed properties:
foo: {
get () { return this.$store.getters.autogeneratedGetterFoo },
set (val) { this.$store.dispatch('autogeneratedAction', val) }
}
so, from now, you can safely use `foo` in v-model directives
*/
...mapVuexModels([
'foo',
'bar'
])
}
}
Vuex namespaced stores
Also you can use vuex-models
for namespaced vuex modules. All you need is to pass second argument to mapVuexModels
with namespace name:
// for example we have store module namespaced with 'MyNamespacedModule'
/*
const store = new Vuex.Store({
modules: {
MyNamespacedModule: {
namespaced: true,
...genVuexModels({
foo: 'value'
})
}
}
})
*/
export default {
computed: {
...mapVuexModels([
'foo'
], 'MyNamespacedModule')
}
}
Rename computed properties
Like vuex mappers, mapVuexModels supports properties renaming:
export default {
computed: {
// this.myFoo responds to store.foo model
...mapVuexModels({
'myFoo': 'foo'
})
}
}