Skip to content
Simple two-way data binding between vue components and vuex store
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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.


Just use npm:

npm i --save vuex-models


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
    From 1.0.2 added handy support to create models with initial state.
    Just use `genVuexModels` with object instead array, as follow:
// models with initial state values
const models = genVuexModels({
  foo: 'bar'
}, 'baz')

const store = new Vuex.Store({

  OLD WAY! Do not use it at new code!
  Before 1.0.2 state was empty object with namespace, so it was
  your responsibility to manually create initial state
const { mutations, actions, getters, state } = genVuexModels([
], 'bar');

const oldWayStore = new Vuex.Store({

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

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'

export default {
  computed: {
    ], 'MyNamespacedModule')

Rename computed properties

Like vuex mappers, mapVuexModels supports properties renaming:

export default {
  computed: {
    // responds to model
      'bar': 'foo'
You can’t perform that action at this time.