pinia

适用场景

在用户希望执行以下操作时，使用此技能：

• 在 Vue 3 应用中设置 Pinia 状态管理
• 使用 defineStore() 创建 store
• 使用 state、getters 和 actions
• 在组合式 API 中使用 Pinia
• 在选项式 API 中使用 Pinia
• 使用 Pinia 实现 SSR（服务器端渲染）
• 创建和使用 Pinia 插件
• 在组件中访问 store
• 在组件之间共享状态
• 使用插件持久化状态
• 测试 Pinia store
• 从 Vuex 迁移到 Pinia

如何使用此技能

此技能的组织结构与 Pinia 官方文档一致（https://pinia.vuejs.org/introduction.html、https://pinia.vuejs.org/core-concepts/、https://pinia.vuejs.org/api/）。使用 Pinia 时：

1. 根据用户请求确定主题：

   • Introduction/介绍 → examples/introduction/
   • Core Concepts/核心概念 → examples/core-concepts/
   • Cookbook/食谱 → examples/cookbook/
   • SSR/服务端渲染 → examples/ssr/
   • API Reference/API 参考 → api/

2. 从 examples/ 目录加载相应的示例文件：

   Introduction（介绍） - examples/introduction/：

   • examples/introduction/introduction.md

   Core Concepts（核心概念） - examples/core-concepts/：

   • examples/core-concepts/actions.md
   • examples/core-concepts/defining-a-store.md
   • examples/core-concepts/getters.md
   • examples/core-concepts/index.md
   • examples/core-concepts/outside-component-usage.md
   • examples/core-concepts/plugins.md
   • examples/core-concepts/state.md

   Cookbook（食谱） - examples/cookbook/：

   • examples/cookbook/composables.md
   • examples/cookbook/composing-stores.md
   • examples/cookbook/hot-module-replacement.md
   • examples/cookbook/index.md
   • examples/cookbook/migration-v1-v2.md
   • examples/cookbook/migration-v2-v3.md
   • examples/cookbook/migration-vuex.md
   • examples/cookbook/options-api.md
   • examples/cookbook/testing.md
   • examples/cookbook/vscode-snippets.md

   SSR（服务端渲染） - examples/ssr/：

   • examples/ssr/index.md
   • examples/ssr/nuxt.md

3. 根据需要参考 api/ 目录中的 API 文档：

   Pinia Core API - api/pinia/：

   • api/pinia/enumerations/MutationType.md
   • api/pinia/functions/acceptHMRUpdate.md
   • api/pinia/functions/createPinia.md
   • api/pinia/functions/defineStore.md
   • api/pinia/functions/disposePinia.md
   • api/pinia/functions/getActivePinia.md
   • api/pinia/functions/mapActions.md
   • api/pinia/functions/mapState.md
   • api/pinia/functions/mapStores.md
   • api/pinia/functions/mapWritableState.md
   • api/pinia/functions/setMapStoreSuffix.md
   • api/pinia/index.md
   • api/pinia/interfaces/Store.md
   • api/pinia/interfaces/StoreActions.md
   • api/pinia/interfaces/StoreDefinition.md
   • api/pinia/interfaces/StoreGetters.md
   • api/pinia/interfaces/StoreProperties.md
   • api/pinia/interfaces/StoreState.md

   @pinia/nuxt - api/@pinia/nuxt/：

   • api/@pinia/nuxt/index.md
   • api/@pinia/nuxt/interfaces/ModuleOptions.md
   • api/@pinia/nuxt/variables/default.md

   @pinia/testing - api/@pinia/testing/：

   • api/@pinia/testing/functions/createTestingPinia.md
   • api/@pinia/testing/index.md
   • api/@pinia/testing/interfaces/TestingOptions.md
   • api/@pinia/testing/interfaces/TestingPinia.md

4. 遵循相应示例文件中有关语法、结构和最佳实践的具体说明

   重要说明：

   • 所有示例均遵循 Pinia 最佳实践
   • 适用时，示例同时提供 JavaScript 和 TypeScript 版本
   • 每个示例文件都包含参数、返回值、常见错误、最佳实践和使用场景
   • 务必查看示例文件中的最佳实践和常见模式

5. 根据需要参考官方文档：

   • Introduction：https://pinia.vuejs.org/introduction.html
   • Core Concepts：https://pinia.vuejs.org/core-concepts/
   • API Reference：https://pinia.vuejs.org/api/

最佳实践

1. 使用 defineStore()：始终使用 defineStore() 创建存储
2. 存储命名：使用描述性的存储 ID
3. 状态结构：尽可能保持状态扁平且规范化
4. Getter：使用 getter 获取根据状态派生的计算值
5. Action：使用 action 执行异步操作和状态变更
6. TypeScript：使用 TypeScript 确保类型安全
7. 存储组合：将大型存储拆分为更小、更专注的存储
8. SSR：使用适当的 SSR 设置进行服务端渲染
9. 插件：使用插件处理横切关注点
10. 测试：为存储和 action 编写测试

资源

• 官方文档：https://pinia.vuejs.org/
• 简介：https://pinia.vuejs.org/introduction.html
• 核心概念：https://pinia.vuejs.org/core-concepts/
• API 参考：https://pinia.vuejs.org/api/
• GitHub 仓库：https://github.com/vuejs/pinia

关键词

Pinia，状态管理，存储，Vue 3，Composition API，Options API，defineStore，状态，getter，action，插件，SSR，服务端渲染，TypeScript，Vuex 迁移，状态管理，存储，组合式 API，选项式 API，插件，服务端渲染，类型支持