Vue Academy · Lektion

Zustandsautomaten mit XState in Vue

useMachine() mit XState v5, Zustände und Übergänge definieren und den Automaten in den Devtools visualisieren

Zustandsautomaten mit XState in Vue ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Zustandsautomaten?

Boolesche Flags wie isLoading, isError und isSuccess können in unmögliche Kombinationen geraten. Ein Zustandsautomat modelliert eine endliche Menge von Zuständen und die zulässigen Übergänge zwischen ihnen. Dadurch können ungültige Zustände gar nicht erst dargestellt werden.

XState kennenlernen

XState ist eine Bibliothek für endliche Zustandsautomaten und Statecharts in JavaScript. Das Paket @xstate/vue integriert sie über ein Composable in die Reaktivität von Vue.

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

Einen Zustandsautomaten definieren

createMachine beschreibt Zustände und Übergänge. Jeder Zustand führt unter on die Ereignisse auf, die zu einem Zielzustand wechseln.

import { createMachine } from "xstate"

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

Zustände und Übergänge

Der Zustandsautomat startet im Zustand initial. Wenn Sie ein Ereignis senden, das unter dem aktuellen Zustand in on aufgeführt ist, wechselt der Automat zum angegebenen Zielzustand. Nicht aufgeführte Ereignisse werden einfach ignoriert – ungültige Übergänge können nicht stattfinden.

Ein Fetch-Zustandsautomat

Bei asynchronen Abläufen spielen Zustandsautomaten ihre Stärken aus. Ein Fetch-Vorgang hat klar definierte Zustände: inaktiv, wird geladen, erfolgreich und fehlgeschlagen – jeweils mit sinnvollen Übergängen.

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 aus @xstate/vue führt den Zustandsautomaten innerhalb einer Komponente aus und gibt einen reaktiven snapshot sowie eine send-Funktion zurück.

import { useMachine } from "@xstate/vue"

const { snapshot, send } = useMachine(fetchMachine)

Den aktuellen Zustand lesen

Der reaktive snapshot enthält den aktuellen Zustand. Prüfen Sie ihn mit snapshot.value.matches("loading") – ideal für bedingtes Rendern.

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

Ereignisse senden

Lösen Sie Übergänge aus, indem Sie send mit einem Ereignis aufrufen. Der Zustandsautomat wechselt nur dann in den nächsten Zustand, wenn der Übergang für den aktuellen Zustand definiert ist.

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

Ereignisse im Template verbinden

Verknüpfen Sie UI-Aktionen mit send. Der Zustandsautomat garantiert, dass die Schaltfläche den Ablauf nur auf gültige Weise fortsetzt.

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

Context für zusätzliche Daten

Zustandsautomaten können einen Context enthalten – erweiterte Daten wie abgerufene Ergebnisse oder Fehlermeldungen, die während der Übergänge durch Aktionen aktualisiert werden. Der Zustand bleibt endlich, während der Context die veränderlichen Daten enthält.

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

Mit Devtools visualisieren

XState-Zustandsautomaten lassen sich als Diagramme visualisieren. Die XState-Devtools bzw. der Stately Inspector stellen den aktiven Zustandsautomaten dar, heben den aktuellen Zustand hervor und ermöglichen das erneute Abspielen von Übergängen – unverzichtbar zum Verständnis komplexer Abläufe.

Kurze Überprüfung

Prüfen Sie Ihr Verständnis von XState in Vue.

Zusammenfassung

Sie haben Zustandsautomaten mit XState kennengelernt:

Zustandsautomaten machen ungültige Zustände unmöglich, indem sie endliche Zustände und zulässige Übergänge definieren.
createMachine deklariert states mit Ereignis-zu-Ziel-Übergängen unter on.
useMachine aus @xstate/vue gibt einen reaktiven snapshot und send zurück.
Lesen Sie den Zustand mit snapshot.matches("...") und lösen Sie Übergänge mit send({ type }) aus.
context enthält zusätzliche Daten; die XState-Devtools visualisieren den Zustandsautomaten.

Häufig gestellte Fragen

Ist die Lektion „Zustandsautomaten mit XState in Vue“ kostenlos?

Ja — der vollständige Text von „Zustandsautomaten mit XState in Vue“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Zustandsautomaten mit XState in Vue“?

useMachine() mit XState v5, Zustände und Übergänge definieren und den Automaten in den Devtools visualisieren Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Zustandsautomaten mit XState in Vue“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Fortgeschrittene Reaktivität: shallowRef und triggerRef
Composable-Factories und parametrisierte Composables
Zustandsautomaten mit XState in Vue
effectScope für gruppierte Effekte

← Zurück zu Vue Academy