/vuex-models

Simple two-way data binding between vue components and vuex store

Primary LanguageJavaScriptMIT LicenseMIT

vuex-models

Support Richard M. Stallman

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