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.

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo par Max sur Unsplash