Parlez-moi des mutations dans Vuex.

Les mutations dans Vuex sont le seul moyen de modifier l'état du magasin. Elles sont synchrones et prennent l'état (state) comme premier argument. Le deuxième argument peut être un objet payload.

Elles sont définies dans l'objet mutations du module ou du magasin racine. Elles sont appelées via la méthode commit.

// Définition d'une mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++ // Modification de l'état
    },
    incrementBy (state, payload) {
      state.count += payload.amount // Modification de l'état avec payload
    }
  }
})

// Appel de la mutation
store.commit('increment')
store.commit('incrementBy', { amount: 10 })

Points clés :

• Synchrone: Toutes les mutations s'exécutent de manière synchrone, garantissant la prévisibilité des changements d'état.
• Seul moyen: Seules les mutations peuvent modifier directement l'état du magasin.
• commit: Pour appeler les mutations, on utilise la méthode store.commit().
• Payload: La mutation peut accepter un second argument - payload, contenant des données supplémentaires.
• Suivi: Vuex Devtools suit toutes les mutations effectuées, facilitant le débogage.

Différences avec les actions (actions) :

• Synchrone vs Asynchrone: Les mutations sont synchrones, les actions peuvent contenir des opérations asynchrones.
• Modification directe vs Commit de mutations: Les mutations modifient directement l'état, les actions committent des mutations.

Caractéristique	Mutations	Actions
Synchrones	Synchrones	Peuvent être asynchrones
Modification d'état	Modifient directement l'état	Commit de mutations
Appel	store.commit()	store.dispatch()
Objectif	Écriture de l'état	Logique métier, opérations asynchrones