Vuex Mutations

The only way to change state is through a mutation. Mutations are synchronous.

Mutation functions in the Store receive positional arguments:

  • state – Current local state
  • payload – Optional payload is whatever (if anything) is passed to commit()‘s second argument.

To dispatch actions or commit mutations in the global namespace, pass { root: true } as the 3rd argument to dispatch and commit.

Mutation functions edit state directly.

mutations: {
  increment(state) {
    state.count++;
  },
},

Commit a Mutation

To invoke a mutation, use the commit() function.

this.$store.commit('counter/increment');
// With a payload of 22
this.$store.commit('counter/setNewValue', 22);

Leave a Reply

Your email address will not be published.