Vue Academy · Leçon

Machines à états avec XState dans Vue

useMachine() avec XState v5, définition des états et transitions et visualisation de la machine dans les DevTools

Machines à états avec XState dans Vue est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Pourquoi utiliser des machines à états ?

Des indicateurs booléens comme isLoading, isError et isSuccess peuvent former des combinaisons impossibles. Une machine à états modélise un ensemble fini d’états ainsi que les transitions autorisées entre eux, ce qui rend les états invalides impossibles à représenter.

Présentation de XState

XState est une bibliothèque destinée aux machines à états finis et aux diagrammes d’états en JavaScript. Le paquet @xstate/vue l’intègre à la réactivité de Vue grâce à un composable.

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

Définir une machine

createMachine décrit les états et les transitions. Chaque état répertorie, sous on, les événements qui permettent d’accéder à un état cible.

import { createMachine } from "xstate"

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

États et transitions

La machine commence dans initial. L’envoi d’un événement indiqué sous on dans l’état actuel déclenche une transition vers la cible nommée. Les événements non répertoriés sont simplement ignorés : les transitions invalides ne peuvent pas se produire.

Une machine de récupération de données

Les machines à états sont particulièrement adaptées aux flux asynchrones. Une récupération de données possède des états clairs : inactif, chargement, réussite et échec — chacun avec des transitions cohérentes.

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

useMachine dans Vue

useMachine, fourni par @xstate/vue, exécute la machine dans un composant et renvoie un snapshot réactif ainsi qu’une fonction send.

import { useMachine } from "@xstate/vue"

const { snapshot, send } = useMachine(fetchMachine)

Lire l’état actuel

Le snapshot réactif contient l’état actuel. Vérifiez-le avec snapshot.value.matches("loading") — c’est idéal pour effectuer un rendu conditionnel.

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

Envoyer des événements

Déclenchez des transitions en appelant send avec un événement. La machine ne passe à l’état suivant que si la transition est définie pour l’état actuel.

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

Relier les événements dans le modèle

Associez les actions de l’interface à send. La machine à états garantit que le bouton ne fait progresser le flux que d’une manière valide.

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

Le contexte pour les données supplémentaires

Les machines peuvent contenir un contexte — des données étendues comme des résultats récupérés ou des messages d’erreur — mis à jour par des actions pendant les transitions. L’état reste fini, tandis que le contexte contient les données variables.

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

Visualiser avec les outils de développement

Les machines XState peuvent être visualisées sous forme de diagrammes. Les outils de développement XState et l’inspecteur Stately affichent la machine en temps réel, mettent l’état actuel en évidence et vous permettent de rejouer les transitions — ce qui est précieux pour comprendre les flux complexes.

Vérification rapide

Vérifiez votre compréhension de XState dans Vue.

Récapitulatif

Vous avez découvert les machines à états avec XState :

Les machines à états rendent les états invalides impossibles en définissant des états finis et les transitions autorisées.
createMachine déclare des states avec des transitions d’événement vers une cible, définies dans on.
useMachine, fourni par @xstate/vue, renvoie un snapshot réactif et send.
Lisez l’état avec snapshot.matches("...") ; déclenchez les transitions avec send({ type }).
context contient les données supplémentaires ; les outils de développement XState visualisent la machine.

Questions Fréquemment Posées

La leçon « Machines à états avec XState dans Vue » est-elle gratuite ?

Oui — le texte complet de « Machines à états avec XState dans Vue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Machines à états avec XState dans Vue » ?

useMachine() avec XState v5, définition des états et transitions et visualisation de la machine dans les DevTools Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Machines à états avec XState dans Vue » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Réactivité avancée : shallowRef et triggerRef
Fabriques de composables et composables paramétrés
Machines à états avec XState dans Vue
effectScope pour regrouper les effets

← Retour à Vue Academy