Vue 3 中响应拦截器通过采集性能数据并调用 Pinia store 的 action 实现日志结构化存储：在请求前挂载 startTime，响应后计算耗时并记录 URL、状态码等字段；Pinia store 提供 addRequestLog action 统一写入日志，支持环境区分、频率控制与扁平化结构。
Vue 3 中响应拦截器本身不直接“结合” Pinia，因为 Axios 或 Fetch 的拦截器运行在请求层面，而 Pinia 管理的是应用状态。真正可行的做法是：在响应拦截器中采集性能数据（如耗时、URL、状态码），再通过调用 Pinia store 的 action 将日志写入状态——这样既利用了拦截器的全局能力，又借助 Pinia 实现结构化存储与后续消费（如上报、调试面板展示）。
在响应拦截器里记录原始耗时与上下文
拦截器是发起请求和收到响应的必经之地，适合捕获真实网络耗时。关键是在请求发出前打上时间戳，在响应到达后计算差值：
- 给每个请求配置唯一 ID（如用 Date.now() + Math.random()），避免并发请求日志混淆
- 用 config.metadata = { startTime: Date.now() } 把起始时间挂载到 config 上（Axios 支持自定义字段）
- 响应成功或失败时，读取 config.metadata.startTime，算出耗时，并提取 URL、method、status、duration 等字段
- 不要在拦截器里直接操作 DOM 或调用复杂逻辑，只做轻量采集
通过 Pinia action 统一写入日志状态
定义一个专门用于日志管理的 store，暴露一个添加日志的 action，确保所有日志都走同一入口，便于后续扩展（比如过滤、节流、上报）：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- store 使用 defineStore 创建，state 包含 logs: [] 数组
- action 如 addRequestLog({ url, method, status, duration, timestamp })，内部 push 到 logs 并可做长度限制（如最多保留 200 条）
- 在响应拦截器中调用该 action：loggerStore.addRequestLog(logData)（注意需提前在拦截器作用域内获取 store 实例）
- 推荐使用 createPinia().use(...) 插件方式初始化 store，避免拦截器中 import 循环
区分开发/生产环境并控制日志粒度
接口日志容易爆炸式增长，必须按需启用：
立即学习“前端免费学习笔记（深入）”；
- 仅在 import.meta.env.DEV 下启用完整日志采集；生产环境默认关闭，或仅记录错误响应（status ≥ 400）
- 对高频接口（如轮询、心跳）加白名单或频率限制，避免刷屏
- 可选：为日志增加 level: 'info' | 'warn' | 'error' 字段，方便筛选；慢请求（如 >1s）自动标为 warn
- 日志对象建议保持扁平结构，避免嵌套深对象（影响序列化与 Devtools 渲染）
配合 $onAction 做请求类 action 的补充监控
如果项目中部分接口调用封装在 Pinia action 内（如 userStore.fetchProfile()），可叠加使用 $onAction 拦截，获得更高层语义：
- 在插件中监听 action 名称是否以 'fetch' 或 'submit' 开头
- 结合 after 钩子获取最终结果，与拦截器中的网络耗时对比，识别是网络慢还是处理慢
- 把 action 名、参数摘要（如 JSON.stringify(args).slice(0, 100)）也记入日志，补全上下文
- 注意：$onAction 不捕获纯 axios 调用，只覆盖定义在 actions 内的方法
