Vorbește-mi despre mutațiile din Vuex.

Mutațiile din Vuex sunt singura modalitate de a modifica starea depozitului. Sunt sincrone și acceptă starea (state) ca primul argument. Al doilea argument poate fi un obiect payload.

Se definesc în obiectul mutations al modulului sau depozitului rădăcină. Sunt apelate cu metoda commit.

// Definirea mutației
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++ // Modificarea stării
    },
    incrementBy (state, payload) {
      state.count += payload.amount // Modificarea stării cu payload
    }
  }
})

// Apelarea mutației
store.commit('increment')
store.commit('incrementBy', { amount: 10 })

Puncte cheie:

• Sincron: Toate mutațiile sunt executate sincron, asigurând previzibilitatea modificărilor de stare.
• Singura metodă: Doar mutațiile pot modifica direct starea.
• commit: Pentru a apela mutațiile, se folosește metoda store.commit().
• Payload: Mutația poate accepta un al doilea argument - payload, conținând date suplimentare.
• Urmărire: Vuex Devtools urmărește toate mutațiile efectuate, facilitând depanarea.

Diferențe față de acțiuni (actions):

• Sincrone vs Asincrone: Mutațiile sunt sincrone, acțiunile pot conține operații asincrone.
• Modificare directă a stării vs Commit de mutații: Mutațiile modifică direct starea, acțiunile commit mutații.

Caracteristică	Mutații	Acțiuni
Sincrone	Sincrone	Pot fi asincrone
Modificare de stare	Modifică direct starea	Commit de mutații
Apel	store.commit()	store.dispatch()
Scop	Scrierea stării	Logica de afaceri, operații asincrone