Vue Academy · Lezione

Macchine a stati con XState in Vue

useMachine() con XState v5, definizione di stati e transizioni, visualizzazione della macchina nei devtools.

Macchine a stati con XState in Vue è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Perché usare le macchine a stati

I flag booleani come isLoading, isError, isSuccess possono portare a combinazioni impossibili. Una macchina a stati modella un insieme finito di stati e le transizioni consentite tra loro, rendendo impossibili gli stati non validi.

Introduzione a XState

XState è una libreria per le macchine a stati finiti e gli statechart in JavaScript. Il pacchetto @xstate/vue la integra con la reattività di Vue tramite un composable.

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

Definire una macchina

createMachine descrive gli stati e le transizioni. Ogni stato elenca in on gli eventi che conducono a uno stato di destinazione.

import { createMachine } from "xstate"

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

Stati e transizioni

La macchina inizia dallo stato indicato da initial. L’invio di un evento elencato in on per lo stato corrente conduce alla destinazione specificata. Gli eventi non elencati vengono semplicemente ignorati — le transizioni non valide non possono verificarsi.

Una macchina per il fetch

Le macchine a stati sono particolarmente adatte ai flussi asincroni. Un fetch ha stati chiari: inattivo, caricamento, riuscito, errore — ciascuno con transizioni appropriate.

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

useMachine in Vue

useMachine di @xstate/vue esegue la macchina all’interno di un componente e restituisce uno snapshot reattivo e una funzione send.

import { useMachine } from "@xstate/vue"

const { snapshot, send } = useMachine(fetchMachine)

Leggere lo stato corrente

Lo snapshot reattivo contiene lo stato corrente. Lo verifichi con snapshot.value.matches("loading") — è perfetto per il rendering condizionale.

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

Inviare eventi

Attivi le transizioni chiamando send con un evento. La macchina passa allo stato successivo solo se la transizione è definita per lo stato corrente.

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

Collegare gli eventi nel template

Colleghi le azioni dell’interfaccia utente a send. La macchina a stati garantisce che il pulsante faccia avanzare il flusso solo in modi validi.

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

Il context per i dati aggiuntivi

Le macchine possono contenere un context — dati estesi come risultati recuperati o messaggi di errore — aggiornato dalle azioni durante le transizioni. Lo stato rimane finito, mentre il context contiene i dati variabili.

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

Visualizzare con gli strumenti di sviluppo

Le macchine XState possono essere visualizzate come diagrammi. Gli XState devtools / Stately inspector mostrano la macchina in tempo reale, evidenziano lo stato corrente e consentono di riprodurre nuovamente le transizioni — uno strumento prezioso per comprendere i flussi complessi.

Verifica rapida

Verifichi la Sua comprensione di XState in Vue.

Riepilogo

Ha imparato a usare le macchine a stati con XState:

Le macchine a stati rendono impossibili gli stati non validi, definendo stati finiti e transizioni consentite.
createMachine dichiara states con transizioni da evento a destinazione definite in on.
useMachine di @xstate/vue restituisce uno snapshot reattivo e send.
Legga lo stato con snapshot.matches("..."); attivi le transizioni con send({ type }).
Il context contiene dati aggiuntivi; gli strumenti di sviluppo XState visualizzano la macchina.

Domande Frequenti

La lezione «Macchine a stati con XState in Vue» è gratuita?

Sì — il testo completo di «Macchine a stati con XState in Vue» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Macchine a stati con XState in Vue»?

useMachine() con XState v5, definizione di stati e transizioni, visualizzazione della macchina nei devtools. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Macchine a stati con XState in Vue»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Reattività avanzata: shallowRef e triggerRef
Factory di composable e composable parametrizzati
Macchine a stati con XState in Vue
effectScope per raggruppare gli effetti

← Torna a Vue Academy