Skip to content
Simple two-way data binding between vue components and vuex store
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.eslintrc
.gitignore
LICENSE
README.md
package-lock.json
package.json
rollup.config.js

README.md

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
  ===
    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({
  ...models
});

/*
  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([
  'foo'
], 'bar');

const oldWayStore = new Vuex.Store({
  mutations,
  actions,
  getters,
  state
});

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'
    ])
  }
}

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: {
    ...mapVuexModels([
      'foo'
    ], 'MyNamespacedModule')
  }
}

Rename computed properties

Like vuex mappers, mapVuexModels supports properties renaming:

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