Перейти к содержимому
JS
22 / 28

Как реализовать паттерн State Machine с XState в Vue?

XState описывает конечный автомат (состояния + переходы), а @xstate/vue даёт composable useMachine, который интегрирует автомат в Vue-компонент. Текущее состояние -- реактивное, переходы -- через send.

JavaScript
import { createMachine } from 'xstate'
import { useMachine } from '@xstate/vue'

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

const { state, send } = useMachine(toggleMachine) // state.value.value -- 'inactive' | 'active'
// send({ type: 'TOGGLE' })
Как реализовать паттерн State Machine с XState в Vue? | JScriptiser