@deviltea/tiny-state-machine-vue

ESM-only package.

Installation

To install the package, use either npm, yarn, or pnpm:

npm install @deviltea/tiny-state-machine-vue

yarn add @deviltea/tiny-state-machine-vue

pnpm add @deviltea/tiny-state-machine-vue

Usage

Example: useMachine

import { createMachine, useMachine } from '@deviltea/tiny-state-machine-vue'

// Define a simple state machine with three states: idle, loading, and finished
const machine = createMachine({
	initial: 'idle',
	states: {
		idle: {
			on: {
				start: 'loading',
			},
		},
		loading: {
			on: {
				done: 'finished',
			},
		},
		finished: {},
	},
})
// Get a vue ref representing the current state
const { currentState } = useMachine(machine)

watch(currentState, (value) => {
	console.log(value)
})

// Transition to the next state
machine.send('start') // The watch will log "loading"

// Finish the transition
machine.send('done') // The watch will log "finished"

License

MIT License © 2023-PRESENT DevilTea