# pinia-xstate

> Put your xstate state machines into a global pinia store.

Latest version **3.0.0** (published 2025-02-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install pinia-xstate
pnpm add pinia-xstate
yarn add pinia-xstate
bun add pinia-xstate
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2025-02-12 |
| First published | 2021-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wobsoriano |
| Keywords | pinia, xstate, state machines |

## Links

- npm: https://www.npmjs.com/package/pinia-xstate
- npm.io page: https://npm.io/package/pinia-xstate

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.5.11

## Recent versions

- 3.0.0 (latest) — 2025-02-12
- 2.2.1 — 2024-12-02
- 2.2.0 — 2024-11-18
- 2.1.0 — 2024-11-15
- 2.0.2 — 2023-12-01
- 2.0.1 — 2023-12-01
- 2.0.0 — 2023-12-01
- 2.0.0-beta.1 — 2023-09-15
- 2.0.0-beta.0 — 2023-09-13
- 1.0.9 — 2022-11-23
- 1.0.8 — 2022-11-23
- 1.0.7 — 2022-03-26
- 1.0.6 — 2022-02-26
- 1.0.5 — 2022-02-23
- 1.0.4 — 2022-02-22
- … 4 more at https://npm.io/package/pinia-xstate/versions

## 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
<script setup>
import { useToggleStore } from './store/toggle'

const store = useToggleStore()
</script>

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

## License

MIT

---
_Source: https://npm.io/package/pinia-xstate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._