用CodeBuddy编写Pinia/Vuex前端状态管理代码

手动编写 Pinia 或 Vuex 状态管理代码时，常见的困扰包括反复定义 store 结构、补全类型签名、拆分模块时需保持常量一致。CodeBuddy 将这类重复劳动整合为四个自动化辅助场景，直接集成到 IDE 中，显著减少机械性输入工作。

以下四个操作方式覆盖了从新建 store 到跨模块同步类型的完整链路，每一步均提供明确的触发方式与输出结果。

一、基于项目上下文生成 Pinia store 文件

CodeBuddy 并非简单套用模板，而是扫描当前 Vue 3 项目的 TypeScript 类型定义、已有接口文件（如 api/models.ts）以及组件中实际使用的 state 字段，从而推演出最合理的初始 state 形状与配套 actions。生成的文件直接符合 Pinia 官方推荐规范。

1、在 VS Code 中打开一个 Vue 3 + TypeScript 项目，确保已安装 @pinia/core 及相应的 Pinia 插件。

2、在 stores 目录上右键，选择 “CodeBuddy: Generate New Store”。

3、输入 store 名称（例如 user），并决定是否启用持久化（勾选 useLocalStorage）。

4、确认后，CodeBuddy 自动生成 user.store.ts，其中包含 defineStore 调用、state 定义、getters 声明以及完整的 actions 实现——每个 action 均标注了 async/await 并嵌套了 try-catch 模板，可直接填充业务逻辑。

二、从组件调用片段反向生成 Vuex module

若维护 Vue 2 老项目，组件中已写有大量 this.$store.dispatch('xxx') 或 mapActions，又希望避免手动对应每个 module，CodeBuddy 可将这些字符串字面量反解，逆向构建出结构清晰、带命名空间的 Vuex module。

1、选中包含多个 dispatch 调用的代码块（如连续三行 this.$store.dispatch('user/login', ...)）。

2、按下快捷键 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac），输入 “CodeBuddy: Infer Vuex Module from Selection”。

3、CodeBuddy 自动提取 action 类型名、payload 接口字段（如 username、password），并推断出 mutation 类型前缀（默认 USER_），随后生成 user.module.ts。

4、生成内容包含 namespaced: true、推断出的 state 初始值、对应的 mutation 逻辑占位符，以及 actions 内部调用 API 的骨架代码，用户只需替换具体接口即可。

三、自动补全 Pinia action 类型签名与返回类型

在现有 Pinia store 中编辑 actions 时，只需编写函数名与参数名，剩余的 TypeScript 类型签名、Promise 返回类型甚至非空校验注释，CodeBuddy 均可实时补全。

1、将光标置于 actions 对象中某个函数名后，按下 Tab 触发智能补全。

2、CodeBuddy 根据函数名关键词匹配模式——例如识别 fetch 开头的函数，自动添加 async 修饰符，并建议返回类型为 Promise（前提是项目中存在 UserProfile 接口）。

3、若参数名为 id，且项目中存在 useRoute 或 useRouter 的痕迹，则插入类型注解 id: string | number，附带一行非空校验的注释提醒。

4、补全完成后光标自动跳转至函数体内，等待编写具体逻辑，省去手动输入长串类型声明的麻烦。

四、跨文件同步 Vuex mutation 类型常量

多个 Vuex module 之间常需重复定义 MUTATION_TYPES 字符串常量，稍有不慎便因字母错误导致排查困难。CodeBuddy 可扫描整个 store/modules/ 目录，提取所有大写命名的 mutation 类型，统一生成 types.ts 并自动导入引用。

1、在任意 Vuex module 文件中，将光标置于 mutations 对象的起始大括号后，按下 Ctrl+Alt+T（Windows/Linux）或 Cmd+Option+T（Mac）。

2、CodeBuddy 扫描所有 module 文件，收集形如 'SET_USER_INFO'、'CLEAR_TOKEN' 的字符串字面量。

3、自动创建 store/types.ts，导出联合类型 export type MutationType = 'SET_USER_INFO' | 'CLEAR_TOKEN' | ...。

4、在当前 module 文件顶部插入 import { MutationType } from '@/store/types'，并将原来硬编码的字符串字面量替换为类型安全的变量引用——一旦类型定义变更，编译器会直接报错，避免遗漏修改。