Vuex : La différence entre actions et mutations

Lorsque l'on débute avec la gestion d'états d'une application avec Vuex, certains concepts se ressemblent tellement que l'on peut vite s'y perdre. C'est notamment le cas avec les actions et les mutations.

À première vue, les deux concepts se ressemblent et on l'air de pouvoir s'interchanger, surtout lorsqu'on les rencontre sous cette forme là :

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

La question se pose alors : Pourquoi est-ce que je ne commiterai pas directement les mutations depuis mes composants, au lieu de passer par des actions ?

La réponse

Les mutations

L'objectif des mutations et d'apporter des modifications atomiques au à l'état (state) du store. Chaque mutation doit contenir un nombre réduit de modifications, le moins de logique possible et doit absolument s'exécuter de manière synchrone.

On va privilégier le fait de toujours d'exécuter (commit) les mutations à l'intérieur même du store, au sein des actions.

Les actions

Les actions contiennent la logique du store, sont appelés par les composants, et surtout coordonnent les appels aux mutations et d'éventuels appels asynchrones.

Reprenons l'exemple précédent, mais avec un peu plus de logique cette fois :

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

Ici on se rend bien compte de la coordination des mutations par l'action, deux mutations différentes, appelées à différents points de l'exécution.

Conclusion

Les actions coordonnent les mutations et gèrent la logique, tandis que les mutations ne gèrent que la sérialisation des données dans le store de manière atomique.