vuex-models

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.

It is compatible with Vue 2.x

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",
    }),
  },
};