// 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;

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

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

export default {
  computed: {
    // this.myFoo responds to store.foo model
    ...mapVuexModels({
      myFoo: "foo",
    }),
  },
};