Erzählen Sie mir von Mutationen in Vuex.

Mutationen in Vuex sind die einzige Möglichkeit, den Zustand des Stores zu ändern. Sie sind synchron und nehmen den Zustand (state) als erstes Argument. Das zweite Argument kann ein Payload-Objekt sein.

Sie werden im mutations-Objekt des Moduls oder des Wurzel-Stores definiert. Sie werden mit der Methode commit aufgerufen.

// Definition einer Mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++ // Zustand ändern
    },
    incrementBy (state, payload) {
      state.count += payload.amount // Zustand mit Payload ändern
    }
  }
})

// Mutation aufrufen
store.commit('increment')
store.commit('incrementBy', { amount: 10 })

Wichtige Punkte:

• Synchron: Alle Mutationen werden synchron ausgeführt, was die Vorhersagbarkeit der Zustandsänderungen gewährleistet.
• Nur Weg: Nur Mutationen können den Zustand direkt ändern.
• commit: Mutationen werden mit store.commit() aufgerufen.
• Payload: Mutationen können ein zweites Argument - payload - annehmen, das zusätzliche Daten enthält.
• Nachverfolgung: Vuex Devtools verfolgt alle durchgeführten Mutationen, was das Debuggen erleichtert.

Unterschiede zu Aktionen (actions):

• Synchron vs Asynchron: Mutationen sind synchron, Aktionen können asynchrone Operationen enthalten.
• Direkte Zustandsänderung vs Commit: Mutationen ändern den Zustand direkt, Aktionen commit Mutationen.

Eigenschaft	Mutationen	Aktionen
Synchron	Synchron	Können asynchron sein
Zustandsänderung	Ändern den Zustand direkt	Committen Mutationen
Aufruf	store.commit()	store.dispatch()
Zweck	Zustandsschreibung	Geschäftslogik, asynchrone Operationen