pinia

Define a Pinia store using defineStore with a unique name, choosing either Option Stores with state/getters/actions or Setup Stores using ref and computed. TypeScript inference works automatically, and you can annotate state with interfaces for complex types.

Test stores by calling setActivePinia(createPinia()) in beforeEach, then invoke actions and assert state directly. For components, install @pinia/testing and use createTestingPinia, which stubs actions by default and lets you set initial state.

Destructuring state or getters directly from a store extracts raw values and loses reactivity. Use storeToRefs(store) to extract state and getters as refs, while actions can be destructured directly since they are bound to the store.

Pinia supports SSR and integrates with Nuxt via the @pinia/nuxt module, which auto-imports stores and handles serialization. For manual SSR, hydrate state on the client before any useStore call and pass the pinia instance when using stores outside components.

Setup Stores can use almost any composable, such as useLocalStorage or useMediaControls from VueUse. Option Stores only support composables returning writable refs in state, and SSR requires hydrate() or skipHydrate() for client-only state.

Calling useStore before the pinia instance is installed on the app throws an error because no active pinia exists. Defer useStore calls to functions like navigation guards or setup, and pass the pinia instance explicitly in SSR contexts.