pinia

Pinia 是 Vue.js 官方推荐且具备类型安全的状态管理库，专为现代应用程序架构的直观性与可扩展性而设计。本技能为 AI 代理提供了关于 Pinia 核心模式的深层领域知识，涵盖 Options API 与 Composition API 的 Store 定义风格。它能协助开发者组织全局应用状态、处理复杂的业务逻辑，并确保与 Vue 响应式系统的无缝整合。

本技能使 AI 代理能够作为 Vue 开发者的技术顾问，协助优化状态管理模式、解决 Store 间通讯中的循环依赖问题，并实现诸如插件扩展与服务器端渲染 (SSR) 水合等进阶功能。无论您是从 Vuex 迁移、构建大型 Nuxt 应用程序，还是进行 Store 单元测试，本技能都能提供维护代码干净、易于维护与测试所需的背景信息。

• 使用 defineStore (Setup 或 Options 风格) 定义 Store，并提供完整的 TypeScript 支持。

• 透过 storeToRefs() 在解构 State 与 Getters 时保持响应式特性。

• 在 Store 内部管理副作用、异步操作与复杂业务逻辑。

• 直接在 Store 逻辑中整合 VueUse Composable 与 Vue 内部响应式工具。

• 实现 Store 插件以透过自定义属性或状态持久化来扩展功能。

• 设置适合 SSR 的状态水合机制与开发阶段的热模块替换 (HMR)。

• 最佳实践：针对复杂逻辑、监听器与依赖注入，优先使用 Setup Stores。

• 最佳实践：保持 Store 模块化；避免创建单一巨大的全局 Store。

• 使用技巧：使用 @pinia/testing 对调用 Store 的组件进行单元测试，并在适当时使用 Mock 与 Stub。

• 限制：确保所有 Store Action 皆在 setup 函数或组件中调用；避免在模块作用域 (Module Scope) 直接调用 Store，特别是在 SSR 环境下。

• 输入/输出：代理程序预期会接收有关 Vue 组件、Store 定义或架构需求的背景信息，并输出优化的代码、配置片段与架构建议。