🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx @anthropic-ai/skills install antfu/skills/pinia

💡 提示：需要 Node.js 和 NPM

ℹ️ 技能信息

名称： (pinia – 编程框架 | 汇易宝)

分类： 教程课程

来源： antfu/skills

安装数： 14,643

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