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