title: Claude Code 状态管理实战Pinia 与复杂业务逻辑date: 2026-07-07category: AI 开发工具tags: [Claude Code, Pinia, 状态管理, Vue 3, 复杂业务]Claude Code 状态管理实战Pinia 与复杂业务逻辑当页面超过 5 个、组件之间存在多层嵌套通信时props drilling 已经不够用了。本篇教你用 Claude 搭建基于 Pinia 的状态管理体系处理多 Tab 页、全局配置、用户信息等复杂场景。前言在小型项目中组件内的ref和reactive就够了。但一旦项目变大——用户需要在设置页修改主题色所有页面立即生效需要多 Tab 页切换时保留各自的搜索条件和表单数据需要判断用户角色来控制菜单可见性——这些就是Pinia 状态管理的用武之地。好消息是Claude Code 对状态管理的理解非常到位。你只需要说清楚哪些数据需要在组件间共享它就能帮你搭建完整的 Pinia Store 架构。一、什么时候该用 Pinia先判断哪些场景需要抽离到 Store场景是否需要 Store原因单个页面内的表单数据否组件内 ref 足够用户登录状态是全局共享主题色/布局配置是多页面联动多 Tab 页的搜索条件是Tab 间独立存储面包屑导航路径是路由联动组件间的 EventBus 通信是替代 $emit 冒泡原则如果同一个数据被 2 个以上组件读取或修改就应该放进 Store。二、搭建 Pinia 基础架构2.1 初始化帮我在项目中初始化 Pinia创建 src/stores/ 目录结构Claude 会执行pnpm add pinia创建src/stores/index.ts并在main.ts中注册。2.2 用户信息 Store创建一个 userStore管理以下内容 - 用户基本信息id, username, name, avatar, roles - 登录/登出方法 - Token 的持久化localStorage - 从后端获取用户详情的方法Claude 生成的src/stores/user.tsimport{ref}fromvueimport{defineStore}frompiniaimport{get}from/utils/httpimporttype{UserInfo}from/api/typesexportconstuseUserStoredefineStore(user,(){consttokenref(localStorage.getItem(token)||)constuserInforefUserInfo|null(null)constrolesrefstring[]([])// 登录asyncfunctionlogin(username:string,password:string){constresawaitpost(/auth/login,{username,password})token.valueres.token localStorage.setItem(token,res.token)awaitfetchUserInfo()returnres}// 登出asyncfunctionlogout(){try{awaitpost(/auth/logout)}finally{token.valueuserInfo.valuenullroles.value[]localStorage.removeItem(token)// 跳转登录页location.reload()}}// 获取用户信息asyncfunctionfetchUserInfo(){constinfoawaitgetUserInfo(/user/info)userInfo.valueinfo roles.valueinfo.roles||[]returninfo}return{token,userInfo,roles,login,logout,fetchUserInfo}})2.3 应用配置 Store创建一个 appStore管理 - 侧边栏折叠状态 - 主题亮色/暗色 - 语言中英文切换 - 面包屑路径Claude 生成的src/stores/app.tsimport{ref,watch}fromvueimport{defineStore}frompiniaexportconstuseAppStoredefineStore(app,(){constsidebarCollapsedref(false)constthemereflight|dark(light)constlocalerefzh-CN|en-US(zh-CN)// 侧边栏折叠切换functiontoggleSidebar(){sidebarCollapsed.value!sidebarCollapsed.value}// 主题切换functionsetTheme(newTheme:light|dark){theme.valuenewTheme document.documentElement.classList.toggle(dark-theme,newThemedark)}// 持久化watch([sidebarCollapsed,theme,locale],([collapsed,t,loc]){localStorage.setItem(app-config,JSON.stringify({collapsed,theme:t,locale:loc}))},{deep:true})// 初始化时恢复constsavedlocalStorage.getItem(app-config)if(saved){constconfigJSON.parse(saved)sidebarCollapsed.valueconfig.collapsed??falsetheme.valueconfig.theme??lightlocale.valueconfig.locale??zh-CN}return{sidebarCollapsed,theme,locale,toggleSidebar,setTheme}})2.4 多 Tab 页缓存 Store创建一个 tabsStore实现多 Tab 页功能 - 每个打开的页面作为一个 Tab - Tab 列表存储在 store 中 - 关闭 Tab 时返回上一页 - 刷新页面时保留 Tab 状态Claude 会创建一个基于shallowRef的 Tab 数组 Store配合watch持久化到 sessionStorage。三、复杂业务场景实战3.1 动态路由 角色权限需要根据用户角色动态生成路由。 管理员可以看到系统设置菜单普通用户只能看到首页和我的信息。 让 Claude 实现基于角色的路由过滤。Claude 会定义完整的路由表包含meta.roles字段在fetchUserInfo后过滤路由用router.addRoute动态注册可用路由在导航守卫中检查权限3.2 全局搜索历史顶部导航栏有一个全局搜索框搜索历史需要跨页面共享。 最近 10 条搜索记录存储在 Pinia 中支持清除历史记录。Claude 会创建一个searchStore在搜索组件中useSearchStore()读取和写入任何页面搜索都会更新同一个状态。3.3 表单草稿自动保存用户填写长表单时每 30 秒自动保存到 localStorage。 刷新页面后自动恢复草稿。 换页时提示是否保存草稿。Claude 会创建一个通用的draftStore用setInterval定时序列化表单数据在onBeforeUnmount时做最后一次保存页面加载时恢复。四、让 Claude 做 Store 重构随着业务发展最初的 Store 设计可能不够用了。比如我现在把所有状态都塞在了一个 appStore 里太臃肿了。 帮我拆分成 user、app、settings 三个独立的 Store。Claude 会分析appStore中的状态和方法按职责拆分到三个新文件找到所有引用旧 Store 的组件更新 import确保拆分后功能不受影响4.1 Options API vs Composition API 风格的 StorePinia 支持两种写法// Composition API 风格推荐exportconstuseCounterStoredefineStore(counter,(){constcountref(0)functionincrement(){count.value}return{count,increment}})// Options API 风格熟悉 Vue 2 写法的人 preferredexportconstuseCounterStoredefineStore(counter,{state:()({count:0}),actions:{increment(){this.count}}})把现有的 Options API 风格的 Store 改成 Composition API 风格Claude 会完成风格统一并解释改动点。五、Store 之间的依赖关系实际项目中Store 之间经常需要互相调用。比如userStore登录后需要更新permissionStore。用户登录后userStore 需要通知 permissionStore 重新加载路由权限。 帮我实现 Store 之间的联动。Claude 的实现方式// stores/permission.tsimport{storeToRefs}frompiniaimport{useUserStore}from./userexportconstusePermissionStoredefineStore(permission,(){constuserStoreuseUserStore()constdynamicRoutesrefRouteRecordRaw[]([])// 监听用户角色变化watch(()userStore.roles,(roles){if(roles.length0){filterRoutes(roles)}},{immediate:true})functionfilterRoutes(roles:string[]){// 根据角色过滤路由dynamicRoutes.valueallRoutes.filter(route!route.meta?.roles||route.meta.roles.some(rroles.includes(r)))}return{dynamicRoutes,filterRoutes}})关键点Pinia 的 Store 可以在另一个 Store 中直接useXxxStore()互调不需要额外配置。六、调试 Store 问题6.1 状态没有响应我在组件中修改了 userStore.userInfo.name但视图没有更新。Claude 会诊断是否直接替换了整个对象userInfo.value newData没问题但userInfo.value { ...userInfo.value, name: new }在reactive下才安全推荐使用userInfo.value!.name new直接修改属性或Object.assign(userInfo.value!, { name: new })如果是ref提醒需要.value6.2 持久化冲突我在两个标签页同时打开了应用在一个标签页修改了主题色 另一个标签页没有实时更新。Claude 会添加window.addEventListener(storage, ...)监听或在 Store 中用BroadcastChannelAPI 实现跨标签页同步。七、这一章的核心心得按需拆分 Store——每个 Store 只做一件事不要把所有状态塞进一个文件Composition API 风格更灵活——支持 Store 之间的互相引用和组合持久化是标配——用户信息、主题配置、侧边栏状态都应该持久化Store 联动比 EventBus 更清晰——Pinia 原生支持 Store 互调不需要额外的通信机制让 Claude 做重构——Store 拆分、风格统一、性能优化Claude 能精准定位所有引用点八、下一步状态管理解决了组件间的数据共享问题但对于大型项目光有前端还不够。下一篇我们将深入 Claude Code 的高级能力——多智能体协作Agent让 Claude 同时派出多个分身并行开发不同模块把开发效率提升数倍。系列目录初识 Claude Code用自然语言打造第一个 Web 页面← 上一篇页面级交互实战表单、弹窗与数据联动← 上一篇前后端联调让 Claude 帮你打通 REST API← 上一篇状态管理Pinia 与复杂业务逻辑 ← 本篇深入 Claude CodeAgent 多智能体协作待写Claude 驱动的后端开发Spring Boot 数据库待写工程化进阶代码审查、调试与性能优化待写高级玩法工作流编排与团队协作待写