VueCraft NPM

Установка ​

bash
npm install @macrulez/vue-state-machine

Peer-зависимость:

bash
npm install vue@>=3.3

Быстрый старт ​

vue
<script setup lang="ts">
import { defineMachine, useMachine } from '@macrulez/vue-state-machine'

const trafficLight = defineMachine({
  id: 'traffic',
  initial: 'red',
  states: {
    red: { on: { NEXT: { target: 'green' } } },
    green: { on: { NEXT: { target: 'yellow' } } },
    yellow: { on: { NEXT: { target: 'red' } } },
  },
})

const { state, send } = useMachine(trafficLight)
</script>

<template>
  <div :class="state">
    <p>Current: {{ state }}</p>
    <button @click="send('NEXT')">Next</button>
  </div>
</template>

state — реактивный Ref<'red' | 'green' | 'yellow'>. Клик по кнопке переводит машину в новое состояние, и Vue перерисовывает интерфейс автоматически.