vue useMachine.ts

useMachine.ts

import { StateMachine, interpret, EventObject } from '@xstate/fsm'
import { ref, Ref, onBeforeMount } from '@vue/composition-api'

export default function useMachine<TContext, TEvent extends EventObject = EventObject> (
  stateMachine: StateMachine.Machine<TContext, TEvent, any>): {
    current: Ref<StateMachine.State<TContext, TEvent, any>>,
    send: StateMachine.Service<TContext, TEvent>['send'],
    service: StateMachine.Service<TContext, TEvent>,
  } {
  const current = ref(stateMachine.initialState) as Ref<StateMachine.State<TContext, TEvent, any>>
  const service = interpret(stateMachine).start()

  onBeforeMount(() => {
    service.subscribe(state => {
      current.value = state
    })
  })

  return {
    current,
    send: service.send,
    service
  }
}