在nuxt可组合中使用XState

Question

我想在Nuxt 3中使用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>

问题是，我可以查看机器{state.value.value}的状态，给出预期的“关闭”。但我不能把这些事件称为国家间的过渡。单击按钮时，什么都不会发生。

下面是传递的‘切换’对象的console.log：

​

​

是否有人知道如何修复此问题，或如何在多个组件上使用xstate状态机。我知道道具能起作用，但我真的不想有这样的分级方法。

Answer 1

在Nuxt3中，它非常简单：

在composables/states.ts中

import { createMachine, assign } from 'xstate';
import { useMachine } from '@xstate/vue';

const toggleMachine = createMachine({
  predictableActionArguments: true,
  id: 'toggle',
  initial: 'inactive',
  context: {
    count: 0,
  },
  states: {
    inactive: {
      on: { TOGGLE: 'active' },
    },
    active: {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      entry: assign({ count: (ctx: any) => ctx.count + 1 }),
      on: { TOGGLE: 'inactive' },
    },
  },
});
export const useToggleMachine = () => useMachine(toggleMachine);

在pages/counter.vue中

<script setup>
const { state, send } = useToggleMachine()
</script>

<template>
  <div>
    <button @click="send('TOGGLE')">
      Click me ({{ state.matches("active") ? "✅" : "❌" }})
    </button>
    <code>
      Toggled
      <strong>{{ state.context.count }}</strong> times
    </code>
  </div>
</template>