API Reference

defineStore

Creates a reactive store definition using the Setup Store pattern.

Signature:

function defineStore<T>(id: string, setup: () => T): () => Store<T>

Parameters:

• id: A unique identifier for the store.
• setup: A function that defines the store's state, getters, and actions. It must return a plain object containing these definitions.

Returns:

• () => Store<T>: A hook function that, when called, returns the store instance. The store is lazily created upon the first call.

Example:

import { defineStore } from 'xds'
import { ref } from 'vue'

const useStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
})

// In component
const store = useStore()

---

xds

Creates a new store registry instance. This is used to install the plugin into a Vue app.

Signature:

function xds(): { install: (app: App) => void }

Usage:

import { createApp } from 'vue'
import { xds } from 'xds'

const app = createApp(App)
app.use(xds())

---

storeToRefs

Destructures a store into a set of refs, preserving reactivity for state properties while ignoring methods. This is useful when you want to destructure the store in a component setup function.

Signature:

function storeToRefs<SS extends Store>(store: SS): ToRefs<SS>

Parameters:

• store: The store instance to destructure.

Returns:

• An object where every state property of the store is converted to a Ref. Methods are excluded.

Example:

import { storeToRefs } from 'xds'

const store = useStore()
const { count } = storeToRefs(store)
// count is a Ref<number>

---

Store (Interface)

The type of the store instance. It is an intersection of the user-defined state/actions and the built-in helpers.

type Store<SS> = Reactive<
  StoreState<SS> & {
    $id: string
    $state: StateTree
    $reset: () => void
    $assign: (...change: Partial<StateTree>[]) => Store
    $patch: (partialStateOrMutator: StatePatchArg) => void
    $dispose: () => void
  }
>

Built-in Helpers

Every store instance comes with the following helper properties and methods:

$id

• Type: string
• Description: A unique identifier for the store.

$state

• Type: StateTree (Plain Object)
• Description: Access the entire state as a plain object. Writing to $state replaces the entire state (via $patch).
• Example:

  console.log(store.$state) // { count: 0 }
  store.$state = { count: 1 }

$patch

• Type: (partialStateOrMutator: Object | Function) => void
• Description: Applies a state update. Can be passed an object to merge, or a function to mutate state directly.
• Example:

  store.$patch({ count: 10 })
  store.$patch((state) => {
    state.count++
  })

$reset

• Type: () => void
• Description: Resets the store to its initial state.
• Note: You must implement a $reset function in your setup function for this to work. If not implemented, calling it will throw an error.

$dispose

• Type: () => void
• Description: Stops the effect scope associated with the store. This stops all internal watchers and effects.

---