Core Concepts

defineStore (Hook Pattern)

• defineStore: Returns a hook function (e.g., useStore).
  • When to use: In most application code, especially within Vue components. It follows the standard Vue/Pinia pattern and allows for lazy initialization. The store is created only when useStore() is first called.
  • Example: const useStore = defineStore(...) → const store = useStore()

Plugin Installation

Installing the plugin via app.use(xds()) is strongly recommended for modern Vue apps.

• Why use it: It ensures the store registry is properly provided to your application context.
  • SSR Safe: Essential for preventing state pollution between requests in Server-Side Rendering.
  • State Isolation: Ensures isolated store instances for multiple Vue apps on the same page.
  • Leak Detection: The library warns if you use defineStore without an active registry context (when xds is used).
• Without it: Stores fall back to a global module-level registry (Singleton Mode), which is simpler but less safe for complex environments.

Core Methods

• $patch(partialStateOrMutator): Update state.
• $reset(): Reset state (requires implementation).
• $state: Access or replace the entire state object.
• $dispose(): Stop the store's effect scope.

Core Functions

• defineStore(id, setup): Create a hook to access a store.
• xds(): Create a new store registry for the app.

Utilities

• storeToRefs(store): Destructures state while preserving reactivity.