Agent Skills
› NeverSight/learn-skills.dev
› pinia
pinia
GitHubPinia是Vue官方状态管理库，支持类型安全与扩展。用于定义Store、操作状态/Getters/Actions及实现Store模式。涵盖插件、组合式API、测试、SSR/Nuxt集成及最佳实践，推荐Setup Store与storeToRefs使用。
Trigger Scenarios
需要为Vue应用定义或配置状态管理Store
处理Vue中的状态获取、修改或动作逻辑
在Vue组件外或SSR场景下使用Pinia
Install
npx skills add NeverSight/learn-skills.dev --skill pinia -g -y
SKILL.md
Frontmatter
{
"name": "pinia",
"metadata": {
"author": "Anthony Fu",
"source": "Generated from https:\/\/github.com\/vuejs\/pinia, scripts located at https:\/\/github.com\/antfu\/skills",
"version": "2026.1.28"
},
"description": "Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state\/getters\/actions, or implementing store patterns in Vue apps."
}
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/testingfor component tests with mocked stores
Version History
- e0220ca Current 2026-07-05 20:28
