To install the package, use either npm, yarn, or pnpm:
npm install @deviltea/tiny-state-machine-vueyarn add @deviltea/tiny-state-machine-vuepnpm add @deviltea/tiny-state-machine-vueimport { 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"