vue devtools 不直接监控 store 读取，但可通过插件代理 getter、pinia 的 $subscribe 结合 reactive dependencies、reactivity 面板查看“used by”、或自定义代理包装实现间接追踪。
Vue Devtools 本身不直接监控 Store 的读取操作，但可以通过插件机制和调试手段间接实现。核心思路是拦截或代理 store 中的 getter 访问，配合开发者工具或自定义日志输出。
使用 Vuex 插件监听 state 访问（适用于 Vuex）
Vuex 插件可以访问 store 实例，在初始化时对 state 做响应式代理，捕获读取行为：
- 在插件中用 Object.defineProperty 或 Proxy 包裹 state 对象，对每个属性的 get 操作打日志
- 注意：Proxy 无法深度代理嵌套对象，建议结合 Vue.set 或使用 reactive 替代原始 state
- 示例：在插件里返回一个函数，该函数在每次触发 computed 或 this.$store.state.xxx 时输出调用路径
Pinia 中利用 $subscribe 和自定义 store 包装
Pinia 本身不暴露读取钩子，但可通过以下方式逼近监控目标：
- 在 defineStore 内部用 ref 或 computed 封装 state 属性，并在 getter 中添加 console.trace() 或自定义事件
- 使用 store.$subscribe 监听 mutation，虽不捕获读取，但配合 source map 可反推哪些组件依赖了哪些字段
- 搭配 Vue Devtools 的 Components 面板，点击组件 → 查看 Reactive Dependencies，能直观看到哪些 store 字段被当前组件读取
借助 Vue Devtools 的“Reactivity”面板（Vue 3 + Pinia/Vuex）
新版 Vue Devtools 提供了实时响应式依赖视图：
- 打开 Devtools → 切换到 Reactivity 标签 → 展开你的 store 实例
- 每个响应式字段旁会显示“Used by”，列出所有 active 的 computed 或组件 render 函数
- 刷新页面或交互后观察变化，即可定位哪些地方正在读取特定字段
编写轻量级读取追踪插件（通用方案）
不依赖框架特性的通用方法：
- 创建一个包装函数 wrapStore(state)，返回代理后的 state，所有 get 操作触发自定义回调
- 回调中记录时间、字段名、调用栈（new Error().stack），过滤掉 Vue 内部调用（如 render、watcher）
- 配合环境变量控制开关，仅在开发模式启用，避免影响生产性能
不复杂但容易忽略：读取本身不触发副作用，所以监控重点应放在“谁在什么时候依赖了什么”，而不是拦截每一次 get。优先用 Devtools 可视化能力，再考虑代码层介入。
