Devtools 集成
Pinia 通过 Vue DevTools 插件暴露 store 列表、state 树、时间旅行式编辑(依赖 DevTools 版本)、action 时间线。
1. 自动行为
app.use(pinia) 后,开发环境尝试注册 DevTools bridge;每个 store 以 id 显示。
2. 可见信息
| 信息 | 说明 |
|---|---|
| State | 当前 $state |
| Getters | 计算属性 |
| Actions | 调用记录、参数(可配置) |
$patch | 作为 mutation 展示 |
3. 生产环境
默认应关闭或剥离 DevTools 钩子;构建工具 tree-shake __DEV__ 分支。
4. 自定义
插件可发送自定义事件;深层集成读 devtoolsPlugin.ts(包内路径以版本为准)。
5. 总结
Devtools 是开发期观测面;与 Redux DevTools 类似,但贴合 Vue 组件树与 Pinia store id。