Vue Academy · Lekcja

Maszyny stanów z XState w Vue

useMachine() z XState v5, definiowanie stanów i przejść oraz wizualizacja maszyny w devtools.

Maszyny stanów z XState w Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dlaczego maszyny stanów

Flagi logiczne, takie jak isLoading, isError i isSuccess, mogą doprowadzić do niemożliwych kombinacji. Maszyna stanów modeluje skończony zbiór stanów oraz dozwolone przejścia między nimi, dzięki czemu nieprawidłowe stany nie mogą zostać utworzone.

Wprowadzenie do XState

XState to biblioteka do obsługi skończonych maszyn stanów i diagramów stanów w JavaScript. Pakiet @xstate/vue integruje ją z reaktywnością Vue za pomocą composable.

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

Definiowanie maszyny

createMachine opisuje stany i przejścia. Każdy stan zawiera pod kluczem on zdarzenia, które prowadzą do stanu docelowego.

import { createMachine } from "xstate"

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

Stany i przejścia

Maszyna rozpoczyna działanie w stanie określonym przez initial. Wysłanie zdarzenia nazwanego w sekcji on bieżącego stanu powoduje przejście do wskazanego stanu docelowego. Zdarzenia, których nie wymieniono, są po prostu ignorowane — nieprawidłowe przejścia nie mogą wystąpić.

Maszyna do pobierania danych

Maszyny stanów szczególnie dobrze sprawdzają się w przepływach asynchronicznych. Pobieranie danych ma wyraźnie określone stany: bezczynność, ładowanie, powodzenie i niepowodzenie — każdy z rozsądnymi przejściami.

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

useMachine w Vue

useMachine z @xstate/vue uruchamia maszynę wewnątrz komponentu i zwraca reaktywny snapshot oraz funkcję send.

import { useMachine } from "@xstate/vue"

const { snapshot, send } = useMachine(fetchMachine)

Odczytywanie bieżącego stanu

Reaktywny snapshot przechowuje bieżący stan. Należy sprawdzać go za pomocą snapshot.value.matches("loading") — doskonale nadaje się to do warunkowego renderowania.

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

Wysyłanie zdarzeń

Przejścia wyzwala się przez wywołanie send ze zdarzeniem. Maszyna przechodzi do następnego stanu tylko wtedy, gdy dla bieżącego stanu zdefiniowano odpowiednie przejście.

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

Podłączanie zdarzeń w szablonie

Powiąż działania interfejsu użytkownika z send. Maszyna stanów gwarantuje, że przycisk będzie posuwać przepływ tylko w prawidłowy sposób.

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

Context na dodatkowe dane

Maszyny mogą przechowywać context — dodatkowe dane, takie jak pobrane wyniki lub komunikaty o błędach — aktualizowane przez akcje podczas przejść. Stan pozostaje skończony, a context przechowuje zmienne dane.

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

Wizualizacja za pomocą narzędzi deweloperskich

Maszyny XState można przedstawiać w postaci diagramów. XState devtools / Stately inspector renderują działającą maszynę, wyróżniają bieżący stan i pozwalają odtwarzać przejścia — jest to nieoceniona pomoc w rozumieniu złożonych przepływów.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat XState w Vue.

Podsumowanie

Poznałeś maszyny stanów z XState:

Maszyny stanów uniemożliwiają wystąpienie nieprawidłowych stanów dzięki zdefiniowaniu skończonych stanów i dozwolonych przejść.
createMachine deklaruje states wraz z przejściami od zdarzeń do stanów docelowych określonymi za pomocą on.
useMachine z @xstate/vue zwraca reaktywny snapshot i funkcję send.
Stan odczytuje się za pomocą snapshot.matches("..."), a przejścia wyzwala za pomocą send({ type }).
context przechowuje dodatkowe dane, a narzędzia deweloperskie XState wizualizują maszynę.

Często zadawane pytania

Czy lekcja „Maszyny stanów z XState w Vue” jest bezpłatna?

Tak — pełny tekst „Maszyny stanów z XState w Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Maszyny stanów z XState w Vue”?

useMachine() z XState v5, definiowanie stanów i przejść oraz wizualizacja maszyny w devtools. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Maszyny stanów z XState w Vue”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Zaawansowana reaktywność: shallowRef i triggerRef
Fabryki composable i composable z parametrami
Maszyny stanów z XState w Vue
effectScope do grupowania efektów

← Powrót do Vue Academy