Pinia
Pinia is the official state management library for Vue, designed to be intuitive and type-safe. It supports both Options API and Composition API styles, with first-class TypeScript support and devtools integration.
The skill is based on Pinia v3.0.4, generated at 2026-01-28.
Core References
| Topic | Description | Reference |
|---|
| Stores | Defining stores, state, getters, actions, storeToRefs, subscriptions | core-stores |
Features
Extensibility
| Topic | Description | Reference |
|---|
| Plugins | Extend stores with custom properties, state, behavior, and persistence | features-plugins |
Composability
Best Practices
Advanced
| Topic | Description | Reference |
|---|
| SSR | Server-side rendering, state hydration | advanced-ssr |
| Nuxt | Nuxt integration, auto-imports, SSR best practices | advanced-nuxt |
| HMR | Hot module replacement for development | advanced-hmr |
Key Recommendations
- Prefer Setup Stores for complex logic, composables, and watchers
- Use
storeToRefs() when destructuring state/getters to preserve reactivity
- Actions can be destructured directly - they're bound to the store
- Call stores inside functions not at module scope, especially for SSR
- Add HMR support to each store for better development experience
- Use
@pinia/testing for component tests with mocked stores