Vue Academy · Lección

Mutations y actions

Cambie el estado mediante mutations y actions asíncronas

Mutations y actions es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

Cambiar el estado de forma segura

En Vuex, nunca modifique el estado directamente desde un componente. En su lugar, todos los cambios pasan por las mutations. Esta ruta única y explícita hace que cada cambio de estado pueda rastrearse y depurarse en Vue DevTools.

¿Qué es una mutation?

Una mutation es una función síncrona que recibe el estado actual y lo modifica. Las mutations son el único lugar donde se permite modificar el estado.

mutations: {
  increment(state) {
    state.count++
  }
}

Las mutations deben ser síncronas

Las mutations deben ejecutarse de forma síncrona. Si incluye código async, como una llamada de red, dentro de una mutation, DevTools no podrá determinar cuándo cambió realmente el estado, lo que interrumpirá la depuración con viajes en el tiempo.

Confirmar una mutation

Para ejecutar una mutation, haga commit de ella por su nombre desde un componente mediante this.$store.commit.

methods: {
  add() {
    this.$store.commit("increment")
  }
}

Pasar un payload

Las mutations aceptan un argumento adicional llamado payload, que permite pasar datos al cambio.

mutations: {
  incrementBy(state, amount) {
    state.count += amount
  }
}

// commit with payload
this.$store.commit("incrementBy", 5)

Payloads con formato de objeto

Para varios valores, pase un payload en forma de objeto. Es más claro y flexible que utilizar argumentos posicionales.

mutations: {
  setUser(state, payload) {
    state.user = { id: payload.id, name: payload.name }
  }
}

this.$store.commit("setUser", { id: 1, name: "Ada" })

¿Qué es una acción?

Una acción gestiona el trabajo asíncrono y la lógica de negocio. Las acciones no cambian el estado directamente; en su lugar, confirman mutaciones. Esto mantiene el código asíncrono separado de la mutación real del estado.

Definición de una acción

Una acción recibe un objeto de contexto. A partir de él, puede confirmar mutaciones mediante commit o acceder al estado.

actions: {
  async fetchUser(context, userId) {
    const res = await fetch("/api/users/" + userId)
    const data = await res.json()
    context.commit("setUser", data)
  }
}

Desestructurar el contexto

Es habitual desestructurar directamente commit del contexto para escribir código más conciso.

actions: {
  async loadTodos({ commit }) {
    commit("setLoading", true)
    const res = await fetch("/api/todos")
    commit("setTodos", await res.json())
    commit("setLoading", false)
  }
}

Despachar una acción

Los componentes activan acciones con this.$store.dispatch y pasan un payload opcional. Dispatch devuelve una promesa para las acciones asíncronas.

methods: {
  async load() {
    await this.$store.dispatch("loadTodos")
  }
}

El flujo completo

El ciclo completo es el siguiente: un componente despacha una acción, la acción realiza trabajo asíncrono y confirma una mutación, y la mutación cambia el estado. Después, el estado reactivo actualiza la interfaz de usuario automáticamente.

Comprobación rápida

Compruebe sus conocimientos sobre mutaciones y acciones.

Repaso

El estado solo cambia mediante mutaciones, que son síncronas y se confirman con commit. La lógica asíncrona se encuentra en las acciones, que se despachan con dispatch y confirman mutaciones cuando están listas. Ambas aceptan payloads para pasar datos. A continuación, añadirá getters y dividirá el store en módulos.

Preguntas frecuentes

¿La lección «Mutations y actions» es gratis?

Sí — el texto completo de «Mutations y actions» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Mutations y actions»?

Cambie el estado mediante mutations y actions asíncronas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.

¿Cuánto tiempo toma la lección «Mutations y actions»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy