PackagesXState Store
@xstate/store-vue
The @xstate/store-vue package provides Vue bindings for XState Store. It includes composables for subscribing to store state as reactive refs.
This package re-exports all of @xstate/store, so you only need to install @xstate/store-vue.
Installation
npm install @xstate/store-vuepnpm install @xstate/store-vueyarn add @xstate/store-vueQuick start
<script setup>
import { createStore, useSelector } from '@xstate/store-vue';
const store = createStore({
context: { count: 0 },
on: {
inc: (context, event: { by?: number }) => ({
count: context.count + (event.by ?? 1),
}),
},
});
const count = useSelector(store, (state) => state.context.count);
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="store.trigger.inc()">+1</button>
<button @click="store.trigger.inc({ by: 5 })">+5</button>
</div>
</template>API
useSelector(store, selector?, compare?)
Creates a reactive ref that subscribes to a store and returns a selected value.
<script setup>
import { useSelector } from '@xstate/store-vue';
// Select specific value
const count = useSelector(store, (state) => state.context.count);
// With custom comparison function
const user = useSelector(
store,
(state) => state.context.user,
(prev, next) => prev.id === next.id
);
// Without selector (returns full snapshot)
const snapshot = useSelector(store);
</script>
<template>
<div>Count: {{ count }}</div>
</template>Parameters:
store- The store to subscribe toselector- Optional function to select a value from the store snapshot. If not provided, returns the full snapshot.compare- Optional comparison function (defaults to strict equality===)
Returns: A read-only ref containing the selected value
Full documentation
For complete XState Store documentation including context, transitions, effects, atoms, and more, see the XState Store docs.