Общий доступ и инструменты

useSharedMachine

Создаёт или получает singleton-инстанс машины по config.id. Полезно, когда несвязанным компонентам нужно делить одну и ту же запущенную машину без прокидывания пропсов или Pinia.

function useSharedMachine<TState, TEvent, TContext>(
  config: MachineConfig<TState, TEvent, TContext>,
  options?: UseMachineOptions,
): MachineInstance<TState, TEvent, TContext>

Требует установленный VueMachinePlugin.

// В компоненте A
const { state } = useSharedMachine(cartMachine)

// В компоненте B (полностью отдельное дерево)
const { send } = useSharedMachine(cartMachine)

// Оба используют один и тот же инстанс машины — одно состояние, один контекст
await send('ADD_ITEM') // state.value компонента A обновляется реактивно

Если машина с config.id уже зарегистрирована в хранилище, возвращается существующий инстанс. Иначе создаётся новый и регистрируется автоматически.

Vue-плагин

Установите VueMachinePlugin, чтобы включить глобальный реестр машин (useMachineStore, useSharedMachine) и интеграцию с DevTools.

import { createApp } from 'vue'
import { VueMachinePlugin } from 'vue-state-machine'
import App from './App.vue'

const app = createApp(App)
app.use(VueMachinePlugin)
app.mount('#app')

useMachineStore()

Предоставляет прямой доступ к глобальному реестру. Полезно для отладки или админ-панелей.

const store = useMachineStore()

store.register('cart', instance) // зарегистрировать вручную
store.unregister('cart')
store.get('cart') // MachineInstance | undefined
store.getAll() // Map<string, MachineInstance>

Вызов useMachineStore() без установленного плагина выбрасывает содержательную ошибку.

DevTools

Интеграция с DevTools живёт в отдельной точке входа, поэтому никогда не попадает в продакшен-бандлы.

import { createApp } from 'vue'
import { VueMachinePlugin } from 'vue-state-machine'
import { VueMachineDevtools } from 'vue-state-machine/devtools'
import App from './App.vue'

const app = createApp(App)
app.use(VueMachinePlugin)

// Только в разработке
if (import.meta.env.DEV) {
  app.use(VueMachineDevtools)
}

app.mount('#app')

Возможности панели:

• Список всех зарегистрированных машин (из MachineStore)
• Текущее состояние, контекст в виде дерева JSON, полная история переходов
• Кнопка «Send Event» — выбрать тип события и добавить кастомный payload
• Таймлайн: каждый переход отправляется как именованное событие таймлайна DevTools с временной меткой и payload

VueMachinePlugin должен быть установлен раньше VueMachineDevtools.