Vuex: The Difference Between Actions and Mutations

When starting out with state management in an application with Vuex, some concepts are so similar that it's easy to get lost. This is particularly true for actions and mutations.

At first glance, the two concepts seem similar and appear interchangeable, especially when encountered in this form:

//store.js
{
  ...
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
  },
  actions: {
    setUser({ commit }, payload) {    
      commit('setSession', payload);
    },
  }
  ...
}

The question then arises: Why shouldn't I commit mutations directly from my components, instead of going through actions?

The answer

Mutations

The purpose of mutations is to make atomic changes to the store's state. Each mutation should contain a small number of changes, as little logic as possible, and must absolutely execute synchronously.

We favor always executing (committing) mutations from within the store itself, inside actions.

Actions

Actions contain the store's logic, are called by components, and above all coordinate calls to mutations and any asynchronous calls.

Let's revisit the previous example, but with a bit more logic this time:

//store.js
{
  ...
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setUserLoading(state, val) {
    	state.userLoading = val;
    }
  },
  actions: {
    async setUser({ commit, state }, payload) {
      if(state.user) return;
      commit('setUserLoading', true);
      try{
        const response = await fetch(..., payload);
        const userObject = await response.json();
        commit('setUser', userObject);
      } catch(e){
        ...
      } finally {
        commit('setUserLoading', false);
      }
    },
  }
  ...
}

Here we clearly see the action coordinating mutations, two different mutations, called at different points during execution.

Conclusion

Actions coordinate mutations and handle logic, while mutations only handle the serialization of data into the store in an atomic way.