Vue Academy · Aula

Máquinas de estado com XState no Vue

useMachine() com XState v5, definição de estados e transições e visualização da máquina nos DevTools.

Máquinas de estado com XState no Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Por que usar máquinas de estado

Sinalizadores booleanos como isLoading, isError e isSuccess podem acabar em combinações impossíveis. Uma máquina de state modela um conjunto finito de estados e as transições permitidas entre eles, tornando impossível representar estados inválidos.

Apresentando o XState

XState é uma biblioteca para máquinas de estados finitos e gráficos de estados em JavaScript. O pacote @xstate/vue integra essa biblioteca à reatividade do Vue por meio de um componível.

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

Definindo uma máquina

createMachine descreve estados e transições. Cada estado lista, em on, os eventos que levam a um estado de destino.

import { createMachine } from "xstate"

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

Estados e transições

A máquina começa em initial. Enviar um evento listado em on do state atual faz a máquina transicionar para o destino especificado. Eventos não listados são simplesmente ignorados — transições inválidas não podem acontecer.

Uma máquina de busca

Máquinas de estados são especialmente úteis para fluxos assíncronos. Uma operação de busca tem estados claros: ocioso, carregando, sucesso e falha — cada um com transições coerentes.

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

useMachine no Vue

useMachine, de @xstate/vue, executa a máquina dentro de um componente e retorna um snapshot reativo e uma função send.

import { useMachine } from "@xstate/vue"

const { snapshot, send } = useMachine(fetchMachine)

Lendo o estado atual

O snapshot reativo contém o state atual. Verifique-o com snapshot.value.matches("loading") — perfeito para renderização condicional.

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

Enviando eventos

Acione transições chamando send com um evento. A máquina passa para o próximo estado somente se a transição estiver definida para o state atual.

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

Conectando eventos no modelo

Associe ações da interface a send. A máquina de estados garante que o botão só avance o fluxo de maneiras 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 dados adicionais

As máquinas podem carregar contexto — dados adicionais, como resultados obtidos ou mensagens de erro — atualizados por ações durante as transições. O state continua finito, enquanto o contexto contém os dados variáveis.

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

Visualizando com ferramentas de desenvolvimento

As máquinas do XState podem ser visualizadas como diagramas. As ferramentas de desenvolvimento do XState e o inspetor da Stately renderizam a máquina em execução, destacam o state atual e permitem reproduzir transições — algo valioso para compreender fluxos complexos.

Verificação rápida

Verifique sua compreensão sobre XState no Vue.

Recapitulação

Você aprendeu sobre máquinas de estados com XState:

Máquinas de estados tornam estados inválidos impossíveis ao definir estados finitos e transições permitidas.
createMachine declara states com transições de eventos para destinos em on.
useMachine, de @xstate/vue, retorna um snapshot reativo e send.
Leia o state com snapshot.matches("..."); acione transições com send({ type }).
context contém dados adicionais; as ferramentas de desenvolvimento do XState visualizam a máquina.

Perguntas Frequentes

A aula “Máquinas de estado com XState no Vue” é grátis?

Sim — o texto completo de “Máquinas de estado com XState no Vue” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Máquinas de estado com XState no Vue”?

useMachine() com XState v5, definição de estados e transições e visualização da máquina nos DevTools. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Máquinas de estado com XState no Vue”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Reatividade avançada: shallowRef e triggerRef
Fábricas de composables e composables parametrizados
Máquinas de estado com XState no Vue
effectScope para efeitos agrupados

← Voltar para Vue Academy