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, and behavior | features-plugins |

Composability

| Topic | Description | Reference | |-------|-------------|-----------| | Composables | Using Vue composables within stores (VueUse, etc.) | features-composables | | Composing Stores | Store-to-store communication, avoiding circular dependencies | features-composing-stores |

Best Practices

| Topic | Description | Reference | |-------|-------------|-----------| | Testing | Unit testing with @pinia/testing, mocking, stubbing | best-practices-testing | | Outside Components | Using stores in navigation guards, plugins, middlewares | best-practices-outside-component |

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