关于 pinia
面向 Vue 开发者的 Pinia v3.0.4 技能，讲解状态管理、Store、TypeScript 和开发者工具，也涵盖测试、服务端渲染与 Store 组合。
主要功能
- 01Store、状态、获取器与动作
- 02Options 与 Composition API 风格
- 03插件与组合式函数
- 04Store 组合与订阅
- 05使用 @pinia/testing 测试
- 06SSR、Nuxt 与 HMR
适用场景
- 01组织 Vue 应用状态
- 02在多个 Store 间共享逻辑
- 03用模拟 Store 测试组件
- 04管理 SSR 状态注水
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/pinia确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
GENERATION.mdLICENSE.mdSYNC.mdreferences/advanced-hmr.mdadvanced-nuxt.mdadvanced-ssr.mdbest-practices-outside-component.mdbest-practices-testing.mdcore-stores.mdfeatures-composables.mdfeatures-composing-stores.mdfeatures-plugins.md详细介绍
Pinia
Pinia 是 Vue 的官方状态管理库，旨在做到直观且类型安全。它同时支持 Options API 和 Composition API 风格，并提供一流的 TypeScript 支持和 devtools 集成。
此技能基于 Pinia v3.0.4，于 2026-01-28 生成。
核心参考
| 主题 | 描述 | 参考 |
|---|---|---|
| Store | 定义 store、状态、getter、action、storeToRefs、订阅 | core-stores |
功能特性
可扩展性
| 主题 | 描述 | 参考 |
|---|---|---|
| 插件 | 使用自定义属性、状态和行为扩展 store | features-plugins |
可组合性
| 主题 | 描述 | 参考 |
|---|---|---|
| Composable | 在 store 中使用 Vue composable（VueUse 等） | features-composables |
| 组合 Store | Store 之间的通信，避免循环依赖 | features-composing-stores |
最佳实践
| 主题 | 描述 | 参考 |
|---|---|---|
| 测试 | 使用 @pinia/testing 进行单元测试、模拟和桩替换 | best-practices-testing |
| 组件外使用 | 在导航守卫、插件、中间件中使用 store | best-practices-outside-component |
进阶
| 主题 | 描述 | 参考 |
|---|---|---|
| SSR | 服务端渲染、状态水合 | advanced-ssr |
| Nuxt | Nuxt 集成、自动导入、SSR 最佳实践 | advanced-nuxt |
| HMR | 用于开发的热模块替换 | advanced-hmr |
关键建议
- 复杂逻辑、composable 和侦听器优先使用 Setup Store
- 解构状态/getter 时使用
storeToRefs()，以保留响应性 - 可以直接解构 action——它们已绑定到 store
- 在函数内部调用 store，不要在模块作用域调用，尤其是在 SSR 中
- 为每个 store 添加 HMR 支持，以获得更好的开发体验
- 使用
@pinia/testing，为使用模拟 store 的组件编写测试
评论
支持 Markdown