Vue3 状态管理选型：Pinia 的模块化与测试策略
背景与问题界定 Vue3 生态中状态管理的主流方案已经从 Vuex 迁移到了 Pinia。Pinia 在 API 简洁性、TypeScript 支持和 DevTools 集成方面有着天然优势。然而，在实际的落地过程中，许多团队遇到了新的问题：Store 的职责边界模糊化——一个 UseStore 中同时包含了用户信息、页面配置、缓存数据和 WebSocket 连接状态，导致一个 Store 文件超过 500 行；组件与 Store 的耦合度过高——UI 组件直接引用 Store 中的深层嵌套状态，Store 的重构会直接触发组件层的修改；测试困难——Store 内部调用了 router、message 等全局服务，导致单测中不得不 mock 大量外部依赖。这些问题本质上是一个老问题在新工具上的重演：缺少架构层面的模块化指导。 目标拆解与工程约束 Store 单一职责：每个 Store 只负责一个业务领域的数据和操作，领域划分与后端微服务或前端页面路由相对应，Store 文件不超过 200 行。 组件与 Store 的间接引用：组件不应直接导入 useXxxStore 获取深层状态，必须通过 computed 或 getter 投影，或通过 Provider 模式注入接口。 Store 的副作用分离：API 请求、本地存储读写等副作用不写在 Store actions 的内部，而通过 action 参数注入或组合函数组合。 测试无需真实 Pinia 实例：Store 的纯逻辑部分与 Pinia 框架解耦，使开发者可以在 Jest/Vitest 中直接实例化 Store 逻辑进行测试。 方案设计 Pinia 的模块化设计借鉴了领域驱动设计中的聚合根概念。我们定义了三类 Store： ...