Vue + Pinia

Pinia is the standard state management library for Vue 3, and setup stores built with the Composition API give shared application state the same ergonomics as local ref/computed state.

Workflow for Adding a Pinia Store

1. Decide if Pinia is the right tool — Confirm the state is shared across routes/components, not server cache data, and not purely local UI state (see State Ownership below).
2. Create the store file — Add one file per domain under stores/, e.g. stores/cart.ts, using defineStore('cart', () => { ... }).
3. Define state, getters, and actions — Declare state with ref/reactive, derive values with computed, and put all writes/side effects in functions (actions).
4. Return everything from the setup function — Return every piece of state, every getter, and every action so Pinia devtools, SSR, and plugins can track them.
5. Consume in components — Call the store at the top of <script setup>, destructure reactive state with storeToRefs(), and destructure actions directly.
6. Handle SSR/router-guard usage — Call the store from inside setup, a getter, an action, or pass the active Pinia instance explicitly outside setup contexts.
7. Add persistence and tests — Allowlist persisted fields, validate rehydrated data, and test actions directly with @pinia/testing.

State Ownership