在Nuxt 3中跨组件使用XState状态机的功能异常求助

问题现状 #

在Nuxt3中使用nuxt-xstate模块实现跨组件复用的XState状态机，相关代码如下：

状态机代码 #

export default createMachine(
  {
    id: 'toggle',
    initial: 'switched_off',
    states: {
      switched_on: {
        on: {
          SWITCH: { target: 'switched_off' }
        }
      },
      switched_off: {
        on: {
          SWITCH: { target: 'switched_on' }
        }
      }
    }
  }
)

组合式函数代码 #

const toggle = useMachine(toggleMachine)

export function useToggleMachine(){
    return { toggle }
}

App.vue代码 #

<template>
  <div>
    State: {{toggle.state.value.value}}
  </div>
  <br />
  <button @click="toggle.send('SWITCH')">
      Switch
  </button>
</template>

<script>
import { useToggleMachine } from '~/composables/toggle_machine'
export default { 
    setup(){
        const { toggle } = useToggleMachine()
        return { toggle }
    }
}
</script>

当前问题：初始状态switched_off能正常显示，但点击按钮触发SWITCH事件时，状态毫无变化，无法切换。需实现跨组件共享状态机且避免props层级传递的方案。

问题原因 #

组合式函数中useMachine在模块顶级作用域调用，违反了Vue组合式API的调用规则（必须在组件setup或组合式函数内部调用），导致状态更新无法触发组件的响应式重渲染。此外，原写法未处理跨组件共享状态的逻辑，每个组件调用组合式函数会创建独立的状态机实例，无法同步状态。

解决方案 #

方案一：实现单例状态机服务（推荐） #

通过XState的interpret创建全局单例服务，结合Vue响应式API实现跨组件状态共享：

1. 修改组合式函数：

// composables/useToggle.js
import { createMachine, interpret } from 'xstate'
import { ref, onUnmounted } from 'vue'

// 定义状态机（也可单独拆分文件导入）
const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'switched_off',
  states: {
    switched_on: {
      on: { SWITCH: 'switched_off' }
    },
    switched_off: {
      on: { SWITCH: 'switched_on' }
    }
  }
})

// 单例服务实例
let toggleService = null

export function useToggle() {
  // 首次调用时创建并启动服务
  if (!toggleService) {
    toggleService = interpret(toggleMachine).start()
  }

  // 用ref包装状态，实现响应式
  const state = ref(toggleService.state.value)

  // 订阅状态变化，更新响应式数据
  const unsubscribe = toggleService.subscribe((newState) => {
    state.value = newState.value
  })

  // 组件卸载时取消订阅，避免内存泄漏
  onUnmounted(() => unsubscribe())

  // 提供发送事件的方法
  const send = (event) => toggleService.send(event)

  return { state, send }
}

2. 在组件中使用：

<template>
  <div>State: {{ state }}</div>
  <br />
  <button @click="send('SWITCH')">Switch</button>
</template>

<script>
import { useToggle } from '~/composables/useToggle'

export default {
  setup() {
    const { state, send } = useToggle()
    return { state, send }
  }
}
</script>

方案二：利用nuxt-xstate的共享配置 #

若nuxt-xstate模块支持实例共享（部分版本提供share配置项），可直接修改组合式函数：

// composables/useToggleMachine.js
import toggleMachine from '~/path/to/your/machine'

export function useToggleMachine() {
  // 开启share配置，跨组件共享同一状态机实例
  const toggle = useMachine(toggleMachine, { share: true })
  return { toggle }
}

之后在组件中正常调用useToggleMachine即可，所有组件会共享同一个状态机实例，状态变化自动同步。

内容的提问来源于stack exchange，提问作者rajohs