Opowiedz mi o mutacjach w Vuex.

Mutacje w Vuex to jedyny sposób na zmianę stanu magazynu. Są synchroniczne i przyjmują stan (state) jako pierwszy argument. Drugim argumentem może być obiekt payload.

Są definiowane w obiekcie mutations modułu lub głównego magazynu. Wywołuje się je za pomocą metody commit.

// Definicja mutacji
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++ // Zmiana stanu
    },
    incrementBy (state, payload) {
      state.count += payload.amount // Zmiana stanu z payload
    }
  }
})

// Wywołanie mutacji
store.commit('increment')
store.commit('incrementBy', { amount: 10 })

Kluczowe punkty:

• Synchronous: Wszystkie mutacje są wykonywane synchronicznie, co zapewnia przewidywalność zmian stanu.
• Tylko sposób: Tylko mutacje mogą bezpośrednio zmieniać stan magazynu.
• commit: Mutacje wywołuje się za pomocą metody store.commit().
• Payload: Mutacja może przyjąć drugi argument - payload, zawierający dodatkowe dane.
• Śledzenie: Vuex Devtools śledzi wszystkie wykonane mutacje, co ułatwia debugowanie.

Różnice od działań (actions):

• Synchronous vs Asynchronous: Mutacje są synchroniczne, działania mogą zawierać operacje asynchroniczne.
• Bezpośrednia zmiana stanu vs Commit mutacji: Mutacje bezpośrednio zmieniają stan, działania commitują mutacje.

Charakterystyka	Mutacje	Działania
Synchronous	Synchroniczne	Mogą być asynchroniczne
Zmiana stanu	Bezpośrednio zmieniają stan	Commit mutacji
Wywołanie	store.commit()	store.dispatch()
Przeznaczenie	Zapisywanie stanu	Logika biznesowa, operacje asynchroniczne