Pinia-xstate NPM

pinia-xstate

This middleware allows you to easily put your xstate state machines into a global pinia store.

This branch is for XState v5. If you're in Xstate v4, go here instead.

Installation

npm install xstate pinia-xstate

Usage

import { defineStore } from 'pinia'
import { createMachine } from 'xstate'
import { xstate } from 'pinia-xstate'

export const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
})

// create a store using the xstate middleware
export const useToggleStore = defineStore(
  toggleMachine.id,
  xstate(toggleMachine)
)

<script setup>
import { useToggleStore } from './store/toggle'

const store = useToggleStore()
</script>

<template>
  <button @click="store.send('TOGGLE')">
    {{ store.state.value === 'inactive'
      ? 'Click to activate'
      : 'Active! Click to deactivate' }}
  </button>
</template>