Конечные автоматы с XState во Vue
useMachine() с XState v5, определение состояний и переходов и визуализация автомата в DevTools
«Конечные автоматы с XState во Vue» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Зачем нужны конечные автоматы
Логические флаги вроде isLoading, isError и isSuccess могут привести к невозможным сочетаниям. Конечный автомат описывает конечный набор состояний и допустимые переходы между ними, поэтому недопустимые состояния становятся невозможными.
Знакомство с XState
XState — это библиотека для конечных автоматов и диаграмм состояний в JavaScript. Пакет @xstate/vue интегрирует её с реактивностью Vue с помощью компосабла.
// terminal
// npm install xstate @xstate/vueОпределение автомата
createMachine описывает состояния и переходы. В каждом состоянии в on перечислены события, переводящие автомат в целевое состояние.
import { createMachine } from "xstate"
const toggleMachine = createMachine({
id: "toggle",
initial: "inactive",
states: {
inactive: { on: { TOGGLE: "active" } },
active: { on: { TOGGLE: "inactive" } },
},
})Состояния и переходы
Автомат запускается в состоянии initial. Отправка события, указанного в on текущего состояния, переводит автомат в названное целевое состояние. Не перечисленные события просто игнорируются — недопустимые переходы невозможны.
Автомат загрузки данных
Конечные автоматы особенно полезны для асинхронных процессов. У загрузки есть чёткие состояния: ожидание, загрузка, успех и ошибка — каждое с понятными переходами.
const fetchMachine = createMachine({
initial: "idle",
states: {
idle: { on: { FETCH: "loading" } },
loading: { on: { RESOLVE: "success", REJECT: "failure" } },
success: {},
failure: { on: { RETRY: "loading" } },
},
})useMachine во Vue
useMachine из @xstate/vue запускает автомат внутри компонента и возвращает реактивный snapshot и функцию send.
import { useMachine } from "@xstate/vue"
const { snapshot, send } = useMachine(fetchMachine)Чтение текущего состояния
Реактивный snapshot хранит текущее состояние. Проверяйте его с помощью snapshot.value.matches("loading") — это идеально подходит для условительного отображения.
// template
// <Spinner v-if="snapshot.matches('loading')" />
// <Error v-if="snapshot.matches('failure')" />
console.log(snapshot.value.value) // "idle"Отправка событий
Запускайте переходы, вызывая send с событием. Автомат перейдёт в следующее состояние, только если для текущего состояния определён такой переход.
function load() {
send({ type: "FETCH" })
}
// later, on resolve:
// send({ type: "RESOLVE" })Связывание событий в шаблоне
Связывайте действия интерфейса с send. Конечный автомат гарантирует, что кнопка будет продвигать процесс только допустимым образом.
<template>
<button @click="send({ type: 'FETCH' })">Load</button>
<button v-if="snapshot.matches('failure')" @click="send({ type: 'RETRY' })">
Retry
</button>
</template>Контекст для дополнительных данных
Автоматы могут хранить контекст — дополнительные данные, например полученные результаты или сообщения об ошибках, которые обновляются действиями во время переходов. Состояния остаются конечными, а контекст хранит изменяющиеся данные.
createMachine({
context: { data: null, error: null },
initial: "idle",
states: { /* assign to context in transitions */ },
})Визуализация с помощью инструментов разработчика
Автоматы XState можно визуализировать в виде диаграмм. Инструменты разработчика XState и инспектор Stately отображают работающий автомат, выделяют текущее состояние и позволяют воспроизводить переходы — это незаменимо для понимания сложных процессов.
Быстрая проверка
Проверьте, насколько хорошо Вы понимаете XState во Vue.
Повторение
Вы изучили конечные автоматы с XState:
- Конечные автоматы делают недопустимые состояния невозможными, задавая конечные состояния и разрешённые переходы.
createMachineобъявляетstatesс переходами от событий к целевым состояниям черезon.useMachineиз@xstate/vueвозвращает реактивныеsnapshotиsend.- Читайте состояние с помощью
snapshot.matches("..."), а запускайте переходы с помощьюsend({ type }). contextхранит дополнительные данные, а инструменты разработчика XState визуализируют автомат.
Часто задаваемые вопросы
Урок «Конечные автоматы с XState во Vue» бесплатный?
Да — полный текст урока «Конечные автоматы с XState во Vue» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Конечные автоматы с XState во Vue»?
useMachine() с XState v5, определение состояний и переходов и визуализация автомата в DevTools Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Конечные автоматы с XState во Vue»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Продвинутая реактивность: shallowRef и triggerRef
- Фабрики композируемых модулей и параметризованные композируемые модули
- Конечные автоматы с XState во Vue
- effectScope для группировки эффектов