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: 26 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 (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-23T20:20:45.000Z (5 months ago)
• Last Synced: 2024-01-08T08:50:21.591Z (5 months ago)
• Topics: pinia, state-machine, vue, xstate
• Language: TypeScript
• Homepage:
• Size: 468 KB
• Stars: 50
• Watchers: 4
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• awesome-vue - pinia-xstate - Put your xstate state machines into a global pinia store. (Components & Libraries / Utilities)
• awesome-vue - pinia-xstate - Put your xstate state machines into a global pinia store. (Components & Libraries / Utilities)
• awesome-vue - pinia-xstate - Put your xstate state machines into a global pinia store. (Components & Libraries / Utilities)

README

        
# pinia-xstate

[![npm version](https://badge.fury.io/js/pinia-xstate.svg)](https://badge.fury.io/js/pinia-xstate)

[![bundle size](https://badgen.net/bundlephobia/minzip/pinia-xstate)](https://bundlephobia.com/result?p=pinia-xstate)

This middleware allows you to easily put your [xstate](https://github.com/statelyai/xstate) state machines into a global [pinia](https://pinia.esm.dev/) store.

> This branch is for XState v5. If you're in Xstate v4, go [here](https://github.com/wobsoriano/pinia-xstate/tree/xstate-v4) instead.

## Installation

```bash

npm install xstate pinia-xstate

```

## Usage

```ts

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)

)

```

```vue

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

const store = useToggleStore()

  

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

      ? 'Click to activate'

      : 'Active! Click to deactivate' }}

  

```

## License

MIT