Vertel me over mutaties in Vuex.

Mutaties in Vuex zijn de enige manier om de toestand van de opslag te wijzigen. Ze zijn synchrone en nemen de toestand (state) als eerste argument. Het tweede argument kan een payload-object zijn.

Ze worden gedefinieerd in het mutations-object van het module of de hoofdsysteem. Ze worden aangeroepen met de methode commit.

// Mutatie-definitie
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++ // Toestand wijzigen
    },
    incrementBy (state, payload) {
      state.count += payload.amount // Toestand wijzigen met payload
    }
  }
})

// Mutatie aanroepen
store.commit('increment')
store.commit('incrementBy', { amount: 10 })

Belangrijke punten:

• Synchroon: Alle mutaties worden synchroon uitgevoerd, wat voorspelbaarheid van toestandwijzigingen garandeert.
• Enige manier: Alleen mutaties kunnen de toestand rechtstreeks wijzigen.
• commit: Mutaties worden aangeroepen met de methode store.commit().
• Payload: Mutatie kan een tweede argument accepteren - payload, met extra gegevens.
• Volgen: Vuex Devtools volgt alle uitgevoerde mutaties, wat debugging vergemakkelijkt.

Verschillen met acties (actions):

• Synchronous vs Asynchronous: Mutaties zijn synchroon, acties kunnen asynchrone operaties bevatten.
• Directe toestandwijziging vs Commit van mutaties: Mutaties wijzigen de toestand direct, acties commiten mutaties.

Kenmerk	Mutaties	Acties
Synchroon	Synchroon	Kunnen asynchroon zijn
Toestandwijziging	Wijzigen de toestand direct	Committen mutaties
Aanroep	store.commit()	store.dispatch()
Doel	Toestand schrijven	Bedrijfslogica, asynchrone operaties