State Machine
Лёгкие реактивные конечные автоматы (FSM / statechart) для Vue 3 — декларативные состояния и переходы, параллельные регионы, guards и actions.
Декларативные машины состояний и реактивный API
defineMachine создаёт чистую конфигурацию с валидацией на этапе разработки — без Vue-зависимостей, тестируемую в Node. useMachine оборачивает её в реактивные Ref: state, context, send, matches, can, isDone. Всё обновляется автоматически при переходе, а очередь событий гарантирует последовательную обработку без гонок.
Guards, действия и обработка событий
Синхронные guards (предикаты) блокируют переходы и используются в can() для реактивного управления UI. Действия могут быть синхронными или асинхронными, выполняются в порядке exit → transition → entry и возвращают Partial<context> для обновления состояния. Исключения в guards трактуются как false.
Параллельные состояния и useWizard
Внутри одного состояния можно запустить параллельные регионы — независимые под-машины, активные одновременно, каждая со своим состоянием и контекстом. useWizard строит машину для многошаговых форм из массива шагов с canProceed (синхронным или асинхронным), колбэками onEnter/onLeave и гибкой навигацией (next, prev, goTo).
Персистентность, шеринг и DevTools
Сохраняйте состояние и контекст в localStorage (или кастомное Storage) с автоматическим восстановлением. useSharedMachine создаёт синглтон по id, доступный из любых компонентов без Pinia. Vue DevTools-панель показывает все машины, состояние, контекст, историю и позволяет отправлять события прямо из инспектора.
Лёгкость, SSR и XState v5 совместимость
Ядро (~4 KB gzip) не содержит браузерных API — безопасно для SSR. persist и DevTools активируются только на клиенте. API совместим с XState v5: defineMachine вместо createMachine, действия возвращают Partial<context> вместо assign, invoke заменяется асинхронными действиями. Полная типизация с выводом TState/TEvent/TContext.