| 名称 | pinia |
| 描述 | Pinia 是 Vue 的官方状态管理库,类型安全且可扩展。用于定义存储、处理状态/获取器/操作,或在 Vue 应用中实现存储模式。 metadata: |
| 作者 | Anthony Fu |
| 版本 | “2026.1.28” source: 从 https://github.com/vuejs/pinia 生成,脚本位于 https://github.com/antfu/skills |
Pinia
Pinia 是 Vue 的官方状态管理库,旨在直观且类型安全。它支持选项式 API 和组合式 API 风格,具有一流的 TypeScript 支持和开发者工具集成。
该技能基于 Pinia v3.0.4,生成于 2026-01-28。
核心参考
| 主题 | 描述 | 参考 |
|---|---|---|
| 存储 | 定义存储、状态、获取器、操作、storeToRefs、订阅 | core-stores |
特性
可扩展性
| 主题 | 描述 | 参考 |
|---|---|---|
| 插件 | 通过自定义属性、状态和行为扩展存储 | features-plugins |
可组合性
| 主题 | 描述 | 参考 |
|---|---|---|
| 可组合函数 | 在存储中使用 Vue 可组合函数(如 VueUse 等) | features-composables |
| 组合存储 | 存储间通信,避免循环依赖 | features-composing-stores |
最佳实践
| 主题 | 描述 | 参考 |
|---|---|---|
| 测试 | 使用 @pinia/testing 进行单元测试,模拟和存根 | best-practices-testing |
| 组件外使用 | 在导航守卫、插件、中间件中使用存储 | best-practices-outside-component |
高级
| 主题 | 描述 | 参考 |
|---|---|---|
| SSR | 服务器端渲染,状态水合 | advanced-ssr |
| Nuxt | Nuxt 集成,自动导入,SSR 最佳实践 | advanced-nuxt |
| HMR | 开发中的热模块替换 | advanced-hmr |
关键建议
- 优先使用 Setup Stores 用于复杂逻辑、可组合函数和侦听器
- 使用
storeToRefs()当解构状态/获取器时以保持响应性 - 操作可以直接解构 - 它们绑定到存储
- 在函数内调用存储 而非模块作用域,特别是对于 SSR
- 添加 HMR 支持 到每个存储以提升开发体验
- 使用
@pinia/testing进行带有模拟存储的组件测试