Parlami delle mutazioni in Vuex.

Le mutazioni in Vuex sono l'unico modo per modificare lo stato dello store. Sono sincrone e accettano lo stato (state) come primo argomento. Il secondo argomento può essere un oggetto payload.

Vengono definite nell'oggetto mutations del modulo o dello store radice. Si chiamano tramite il metodo commit.

// Definizione di una mutazione
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++ // Modifica dello stato
    },
    incrementBy (state, payload) {
      state.count += payload.amount // Modifica dello stato con payload
    }
  }
})

// Chiamata alla mutazione
store.commit('increment')
store.commit('incrementBy', { amount: 10 })

Punti chiave:

• Sincrone: Tutte le mutazioni vengono eseguite in modo sincrono, garantendo la prevedibilità delle modifiche di stato.
• Unico metodo: Solo le mutazioni possono modificare direttamente lo stato.
• commit: Per chiamare le mutazioni si usa il metodo store.commit().
• Payload: La mutazione può accettare un secondo argomento - payload, contenente dati aggiuntivi.
• Tracciamento: Vuex Devtools traccia tutte le mutazioni eseguite, facilitando il debug.

Differenze con le azioni (actions):

• Sincrono vs Asincrono: Le mutazioni sono sincrone, le azioni possono contenere operazioni asincrone.
• Modifica diretta dello stato vs Commit di mutazioni: Le mutazioni modificano direttamente lo stato, le azioni commit mutazioni.

Caratteristica	Mutazioni	Azioni
Sincrone	Sincrone	Possono essere asincrone
Modifica dello stato	Modificano direttamente lo stato	Commit di mutazioni
Chiamata	store.commit()	store.dispatch()
Scopo	Scrittura dello stato	Logica di business, operazioni asincrone