Should we use v-model to modify Vuex store?

Question

Hello I am beginner in Vue and I do have a problem that\'s really bugging me. I am wondering should we use v-model directive to modify vuex store? Vuex says that we should modif

Answer 1

I think another good option which hasn't been mentioned in any answer here is to use vuex-map-fields. In fact, the library author has written a very nice explanation for the library's usefulness. As per its GitHub page, to use the library you can do something like this:

In your Vuex Store, you can have a snippet similar to this:

import Vue from 'vue';
import Vuex from 'vuex';

import { getField, updateField } from 'vuex-map-fields';

Vue.use(Vuex);

export default new Vuex.Store({
  // ...
  modules: {
    fooModule: {
      namespaced: true,
      state: {
        foo: '',
      },
      getters: {
        getField,
      },
      mutations: {
        updateField,
      },
    },
  },
});

And in your component code, you can have something along the lines of this:

Additional examples for various use cases are shown in the library's GitHub repository that I linked to in the first sentence of this answer.