Vue学习第23天——Vuex开发者工具的使用

一、Vuex开发者工具

浏览器安装完Vue开发者工具之后，里面包含着Vuex开发者工具，不需要额外下载安装

二、Vue开发者工具页面

三、页面按钮详解 

1、选择区按钮

 ① Base State

里面记录的是state里面的初始数据

② 绿色线条

绿色线条在哪一行，页面显示哪一行的数据

③ "ADD"

每一个 “ADD”代表的是一个mutation，ADD是我们自己定义的mutation的名字，这也说明了vuex工作图中开发者工具devtools是直接操作mutation

这三个按钮

④ 左边按钮

点击左边类似于下载的按钮是合并数据，点击之后它会把当前及其前面的mutation方法删除，把他们影响后的数据放在Base State中

⑤ 中间按钮

点击中间类似于禁止的按钮是撤回该mutation，点击后删除此项mutations方法以及其依赖项

 ⑥ 右边按钮

点击右边类似于时间的按钮是撤回按钮，页面退到执行此mutation方法之前的状态

2、展示区

① Export

点击Export是导出数据，比如我们需要把数据导出来让其他程序员看，可以点击Export按钮，这样State中的数据就会在我们的剪切板里面

② Import按钮

点击Export是导入数据，比如我们需要导入其他程序员的数据，可以点击Import按钮，我们通过ctrl +v就能把数据存在state中