0Pricing
Vue Academy · Lección

Máquinas de estados con XState en Vue

useMachine() con XState v5, definición de estados y transiciones y visualización de la máquina en devtools

Máquinas de estados con XState en Vue es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. 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 4 lecciones en total.

¿Por qué usar máquinas de estados?

Los indicadores booleanos como isLoading, isError e isSuccess pueden acabar formando combinaciones imposibles. Una máquina de estados modela un conjunto finito de estados y las transiciones permitidas entre ellos, de modo que los estados no válidos sean imposibles de representar.

Introducción a XState

XState es una biblioteca para máquinas de estados finitos y diagramas de estados en JavaScript. El paquete @xstate/vue se integra con la reactividad de Vue mediante un composable.

// terminal
// npm install xstate @xstate/vue

Definir una máquina

createMachine describe los estados y las transiciones. Cada estado enumera, bajo on, los eventos que llevan a un estado de destino.

import { createMachine } from "xstate"

const toggleMachine = createMachine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
})

Estados y transiciones

La máquina comienza en initial. Al enviar un evento cuyo nombre aparece bajo on del estado actual, se pasa al destino indicado. Los eventos no enumerados simplemente se ignoran; no pueden producirse transiciones no válidas.

Una máquina para solicitudes

Las máquinas de estados resultan especialmente útiles para flujos asíncronos. Una solicitud tiene estados claros: inactiva, cargando, correcta y fallida; cada uno con transiciones coherentes.

const fetchMachine = createMachine({
  initial: "idle",
  states: {
    idle: { on: { FETCH: "loading" } },
    loading: { on: { RESOLVE: "success", REJECT: "failure" } },
    success: {},
    failure: { on: { RETRY: "loading" } },
  },
})

useMachine en Vue

useMachine de @xstate/vue ejecuta la máquina dentro de un componente y devuelve un snapshot reactivo y una función send.

import { useMachine } from "@xstate/vue"

const { snapshot, send } = useMachine(fetchMachine)

Leer el estado actual

El snapshot reactivo contiene el estado actual. Compruébelo con snapshot.value.matches("loading"); es perfecto para el renderizado condicional.

// template
// <Spinner v-if="snapshot.matches('loading')" />
// <Error v-if="snapshot.matches('failure')" />
console.log(snapshot.value.value) // "idle"

Enviar eventos

Active las transiciones llamando a send con un evento. La máquina pasa al siguiente estado solo si la transición está definida para el estado actual.

function load() {
  send({ type: "FETCH" })
}
// later, on resolve:
// send({ type: "RESOLVE" })

Conectar eventos en la plantilla

Vincule las acciones de la interfaz de usuario a send. La máquina de estados garantiza que el botón solo avance el flujo de formas válidas.

<template>
  <button @click="send({ type: 'FETCH' })">Load</button>
  <button v-if="snapshot.matches('failure')" @click="send({ type: 'RETRY' })">
    Retry
  </button>
</template>

Contexto para datos adicionales

Las máquinas pueden contener context —datos ampliados, como resultados obtenidos o mensajes de error—, que las acciones actualizan durante las transiciones. El estado sigue siendo finito, mientras que el contexto contiene los datos variables.

createMachine({
  context: { data: null, error: null },
  initial: "idle",
  states: { /* assign to context in transitions */ },
})

Visualizar con las herramientas de desarrollo

Las máquinas de XState se pueden visualizar como diagramas. Las XState devtools / el inspector de Stately representan la máquina en directo, resaltan el estado actual y permiten reproducir las transiciones; son inestimables para comprender flujos complejos.

Comprobación rápida

Compruebe su comprensión de XState en Vue.

Resumen

Ha aprendido sobre las máquinas de estados con XState:

  • Las máquinas de estados hacen imposibles los estados no válidos al definir estados finitos y transiciones permitidas.
  • createMachine declara states con transiciones de eventos a destinos mediante on.
  • useMachine de @xstate/vue devuelve un snapshot reactivo y send.
  • Lea el estado con snapshot.matches("...") y active las transiciones con send({ type }).
  • context contiene datos adicionales; las herramientas de desarrollo de XState permiten visualizar la máquina.

Preguntas frecuentes

¿La lección «Máquinas de estados con XState en Vue» es gratis?

Sí — el texto completo de «Máquinas de estados con XState en Vue» 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 4 lecciones en total.

¿Qué aprenderé en «Máquinas de estados con XState en Vue»?

useMachine() con XState v5, definición de estados y transiciones y visualización de la máquina en devtools 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 3 de 4.

¿Cuánto tiempo toma la lección «Máquinas de estados con XState en Vue»?

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

  1. Reactividad avanzada: shallowRef y triggerRef
  2. Factorías de composables y composables parametrizados
  3. Máquinas de estados con XState en Vue
  4. effectScope para agrupar efectos
← Volver a Vue Academy