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'，并将原本硬编码的字符串字面量替换为类型安全的变量引用——一旦类型定义变更，编译器会直接报错，杜绝漏改。

来源：互联网