Cómo usar mutations y commit en Vuex

Actualizar el estado de forma segura y trazable en Vuex es sencillo cuando entiendes las mutations, el commit y la reactividad. Aquí verás cómo registrar cambios, depurar con confianza y reducir código con mapMutations, sin romper el flujo de datos.

¿Qué son las mutations y por qué importan para el estado global?

Las mutations son la única vía para cambiar el estado en Vuex. No se actualiza el estado directamente: se registra cada cambio para facilitar el debug y saber qué componente disparó la actualización.

• Funcionan similar a eventos: el store define el handler y el componente hace commit para notificar el cambio.
• Soportan múltiples componentes cambiando el estado simultáneamente sin perder trazabilidad.
• Integran con Vue DevTools: se ve una línea de tiempo de commits y valores en cada momento.
• Son reactivas: cuando cambia el estado, todos los componentes que lo usan se renderizan automáticamente.

Idea clave: el estado es una “variable global reactiva”; al modificarse, la vista se refresca sola en cada componente que depende de él.

¿Cómo usar commit desde el componente para actualizar el estado?

El patrón es directo: defines las mutations en el store y las invocas con this.$store.commit(...) desde el componente. Así mantienes el flujo claro: componente → estado → vista actualizada.

¿Cómo definir increment y decrement en el store?

// store.js
export default new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  }
});

¿Cómo invocar commit desde el componente?

// App.vue (fragmento)
export default {
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    }
  }
};

• commit('increment') o commit('decrement') registran el cambio y actualizan el estado.
• La vista se refresca en automático gracias a la reactividad.
• En DevTools ves cada commit listado y puedes inspeccionar los valores a lo largo del tiempo.

¿Cómo fluye la reactividad y el render?

• El componente hace commit hacia el estado.
• El estado actualiza count y propaga el cambio.
• El componente se vuelve a renderizar con el valor actualizado.

¿Cómo pasar payload y reutilizar con mapMutations?

Puedes extender una mutation con un payload para configurar el cambio y, además, evitar duplicación de código con mapMutations.

¿Cómo agregar payload y valores por defecto?

Puedes recibir un objeto payload y definir un valor default de ES2015 para no romper si no se pasa nada.

// store.js (increment con payload y default)
export default new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state, payload = {}) {
      state.count += payload.number || 1; // usa 1 si no viene number
    },
    decrement(state) {
      state.count--;
    }
  }
});

• payload = {} evita errores cuando no se envía información extra.
• payload.number || 1 permite incrementar por un número custom o por 1.

¿Cómo crear acciones personalizadas como increment diez?

// App.vue (fragmento)
export default {
  methods: {
    incrementDiez() {
      this.$store.commit('increment', { number: 10 });
    }
  }
};

• Útil para botones como “+10”.
• No interfiere con otras mutations ya definidas.

¿Cómo extraer mutaciones con mapMutations y combinar métodos?

Usa mapMutations para “traerte” mutations del store al componente y combinar con métodos propios usando el spread operator.

// App.vue (fragmento)
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement']),
    incrementDiez() {
      this.$store.commit('increment', { number: 10 });
    }
  }
};

• Menos código repetido en componentes.
• Puedes mantener métodos custom como incrementDiez en el componente.
• Si incrementDiez se necesita “en todos lados”, muévelo al store como mutation para hacerlo accesible globalmente.

¿Te gustaría ver variantes con diferentes payloads o atajos con botones? Deja tus preguntas y cuéntame qué caso necesitas cubrir.