Háblame sobre las mutaciones en Vuex.

Las mutaciones en Vuex son la única forma de cambiar el estado del almacén. Son síncronas y aceptan el estado (state) como primer argumento. El segundo argumento puede ser un objeto payload.

Se definen en el objeto mutations del módulo o del almacén raíz. Se llaman mediante el método commit.

// Definición de mutación
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++ // Cambio de estado
    },
    incrementBy (state, payload) {
      state.count += payload.amount // Cambio de estado con payload
    }
  }
})

// Llamada a la mutación
store.commit('increment')
store.commit('incrementBy', { amount: 10 })

Puntos clave:

• Síncronas: Todas las mutaciones se ejecutan de forma síncrona, lo que garantiza la previsibilidad de los cambios de estado.
• Única forma: Solo las mutaciones pueden cambiar directamente el estado del almacén.
• commit: Para llamar a las mutaciones se usa el método store.commit().
• Payload: La mutación puede aceptar un segundo argumento - payload, que contiene datos adicionales.
• Seguimiento: Vuex Devtools rastrea todas las mutaciones realizadas, facilitando la depuración.

Diferencias con las acciones (actions):

• Síncronas vs Asíncronas: Las mutaciones son síncronas, las acciones pueden contener operaciones asíncronas.
• Cambio directo de estado vs Commit de mutaciones: Las mutaciones cambian directamente el estado, las acciones comiten mutaciones.

Característica	Mutaciones	Acciones
Síncronas	Síncronas	Pueden ser asíncronas
Cambio de estado	Cambian directamente el estado	Commit de mutaciones
Llamada	store.commit()	store.dispatch()
Propósito	Escritura del estado	Lógica de negocio, operaciones asíncronas