Pinia 测试与调试：单测与 DevTools

store 一多，单测和 调试就成了日常。
这篇讲 测试里怎么挂 Pinia、怎么 mock 依赖、DevTools 里该看什么，方便你和 CI 对齐。

要点是：不要和真实应用共用一个全局 pinia，否则用例之间会互相污染。

常见模式：

  • 每个测试里 createPinia() + app.use(pinia)（或测试工具提供的 mount 封装）；
  • 或在 beforeEach 里重置相关 store（看团队约定）。

对 action 里请求后端 的部分：

  • mock fetch / axios 层；
  • 或注入 可替换的数据服务，store 只调接口不关心实现。

两条路：

  • mock 外部依赖（推荐优先）：store 逻辑仍跑一遍，更贴近真实；
  • 直接替换整个 store：适合组件测 UI，不关心 store 内部实现时。

别混用两套标准导致「单测全绿、集成全红」。

在 Vue DevTools 的 Pinia 面板里，通常关注：

  • 当前 state 快照：是否被意外改掉；
  • 时间线（若启用）：action 调用顺序；
  • store 列表：是否出现了预期外的重复实例（有时和 HMR、多应用实例有关）。

线上问题仍要靠 日志与埋点 补，DevTools 主要服务开发阶段。

  • 测试里 隔离 pinia 实例，避免状态泄漏；
  • mock 优先打在 IO 边界，而不是随意替换业务规则；
  • DevTools 用来 验证数据流是否符合预期，不是替代监控。

Pinia 小专题到这里收束；若你后面写 Nuxt 或微前端，再单独开一篇谈 多应用实例与 pinia 单例 会更贴切。