Fale-me sobre mutações no Vuex.

As mutações no Vuex são a única forma de alterar o estado do armazenamento. São síncronas e aceitam o estado (state) como primeiro argumento. O segundo argumento pode ser um objeto payload.

São definidas no objeto mutations do módulo ou do armazenamento raiz. São chamadas usando o método commit.

// Definição de mutação
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++ // Alteração do estado
    },
    incrementBy (state, payload) {
      state.count += payload.amount // Alteração do estado com payload
    }
  }
})

// Chamada de mutação
store.commit('increment')
store.commit('incrementBy', { amount: 10 })

Pontos principais:

• Síncronas: Todas as mutações são executadas de forma síncrona, garantindo a previsibilidade das mudanças de estado.
• Única forma: Apenas mutações podem alterar diretamente o estado do armazenamento.
• commit: Para chamar mutações, usa-se o método store.commit().
• Payload: A mutação pode aceitar um segundo argumento - payload, contendo dados adicionais.
• Acompanhamento: Vuex Devtools rastreia todas as mutações realizadas, facilitando a depuração.

Diferenças em relação às ações (actions):

• Síncronas vs Assíncronas: Mutations são síncronas, ações podem conter operações assíncronas.
• Alteração direta do estado vs Commit de Mutations: Mutations alteram diretamente o estado, ações comitem mutações.

Característica	Mutations	Ações
Síncronas	Síncronas	Podem ser assíncronas
Alteração de estado	Alteram diretamente o estado	Comitem mutações
Chamada	store.commit()	store.dispatch()
Propósito	Escrita do estado	Lógica de negócio, operações assíncronas