pinia
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePinia
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.
Pinia是Vue官方的状态管理库，设计直观且类型安全。它同时支持Options API和Composition API风格，提供一流的TypeScript支持以及开发者工具集成。
本技能基于Pinia v3.0.4，生成于2026年1月28日。
Core References
核心参考
| Topic | Description | Reference |
|---|---|---|
| Stores | Defining stores, state, getters, actions, storeToRefs, subscriptions | core-stores |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| Stores | 定义store、state、getters、actions，storeToRefs，订阅 | core-stores |
Features
功能特性
Extensibility
可扩展性
| Topic | Description | Reference |
|---|---|---|
| Plugins | Extend stores with custom properties, state, and behavior | features-plugins |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| Plugins | 使用自定义属性、状态和行为扩展store | 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 |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| Composables | 在store中使用Vue组合式函数（如VueUse等） | features-composables |
| Composing Stores | Store间通信，避免循环依赖 | 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 |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| Testing | 使用@pinia/testing进行单元测试、模拟、存根 | best-practices-testing |
| Outside Components | 在导航守卫、插件、中间件中使用store | 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 |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| SSR | 服务端渲染、状态水合 | advanced-ssr |
| Nuxt | Nuxt集成、自动导入、SSR最佳实践 | advanced-nuxt |
| HMR | 开发环境下的热模块替换 | advanced-hmr |
Key Recommendations
关键建议
- Prefer Setup Stores for complex logic, composables, and watchers
- Use when destructuring state/getters to preserve reactivity
storeToRefs() - 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 for component tests with mocked stores
@pinia/testing
- 优先使用Setup Stores处理复杂逻辑、组合式函数和监听器
- **使用**解构state/getters时保留响应式
storeToRefs() - Actions可直接解构 - 它们已绑定到store
- 在函数内部调用store而非模块作用域，尤其是在SSR场景下
- 为每个store添加HMR支持以提升开发体验
- **使用**在组件测试中模拟store
@pinia/testing