https://github.com/wobsoriano/pinia-xstate

Put your xstate state machines into a global pinia store.
https://github.com/wobsoriano/pinia-xstate

pinia state-machine vue xstate

Last synced: 3 days ago
JSON representation

Put your xstate state machines into a global pinia store.

• Host: GitHub
• URL: https://github.com/wobsoriano/pinia-xstate
• Owner: wobsoriano
• License: mit
• Created: 2021-08-10T16:58:06.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-12-02T17:15:06.000Z (3 months ago)
• Last Synced: 2025-02-08T13:11:14.067Z (13 days ago)
• Topics: pinia, state-machine, vue, xstate
• Language: TypeScript
• Homepage:
• Size: 529 KB
• Stars: 59
• Watchers: 4
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# pinia-xstate

Put your [xstate](https://github.com/statelyai/xstate) state machines into a global [pinia](https://pinia.esm.dev/) store.

## Installation

```bash

npm install xstate pinia-xstate

```

## Usage

```ts

import { defineStore } from 'pinia'

import { xstate } from 'pinia-xstate'

import { createMachine } from '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)

)

```

```vue

import { useToggleStore } from './store/toggle'

const store = useToggleStore()

  

    {{ store.state.value === 'inactive'

      ? 'Click to activate'

      : 'Active! Click to deactivate' }}

  

```

## License

MIT