作为vue框架官方调试工具,dev-tools提供了对于组件关系和数据状态方便的查看和调试功能,现在它也更新到了适配vue3的版本,项目使用最新的版本进行预览调试开发
1. 打开chrome -> 更多工具 -> 扩展程序
2. 把课程资源下的dev-tools中的shell-chrome拖入即可
注意:先把之前基于vue2的版本的禁止掉
当前的调试工具暂时不支持vuex的调试查看,需要我们额外进行log调试,vuex**内置**了一个logger模块,我们只需要引入并且注册为插件即可
+ import { createLogger } from 'vuex'
export default createStore({
modules: {
user,
cart,
category
},
plugins: [
+ createLogger()
]
})
安装好这个log插件之后,我们每次触发action函数和mutation函数都可以在控制台打印出当前本地提交的记录详细信息,包括`名称` `参数` `修改前后的state数据`
调试工具调试的是什么
1. 为什么需要vuex, dev-tools工具呢?
因为需要时刻知道数据状态是如何变化的
2. dev-tools对于vuex调试的是什么或者说展示的是什么呢?
state和mutation之间关系 :在哪个时刻调用了哪个mutation函数传递了什么参数把数据 从什么状态改成了什么状态
1