antfu / skills

pinia

Pinia state management best practices for type-safe Vue stores, getters, and actions.

Install

npx skills add https://github.com/antfu/skills --skill pinia

metadata: author: Anthony Fu version: "2026.9.25" source: Generated from https://github.com/vuejs/pinia, scripts located at https://github.com/antfu/skills

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 v4.0.3, generated at 2026-09-25.

Core References

Topic	Description	Reference
Stores	Defining stores, state, getters, actions, storeToRefs, subscriptions	core-stores [blocked]

Features

Extensibility

Topic	Description	Reference
Plugins	Extend stores with custom properties, state, and behavior	features-plugins [blocked]

Composability

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

Best Practices

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

Advanced

Topic	Description	Reference
SSR	Server-side rendering, state hydration	advanced-ssr [blocked]
Nuxt	Nuxt integration, auto-imports, SSR best practices	advanced-nuxt [blocked]
HMR	Hot module replacement for development	advanced-hmr [blocked]

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

Design engineering

Frameworks & libraries