vue3 调试工具配置

任务目标: 安装针对于vue3的开发调试环境

1. Dev-tools安装

作为vue框架官方调试工具，dev-tools提供了对于组件关系和数据状态方便的查看和调试功能，现在它也更新到了适配vue3的版本，我们这次的项目使用最新的版本进行预览调试开发

1. 打开chrome -> 更多工具 -> 扩展程序
2. 把飞书群里的dev-tools中的shell-chrome拖入即可

注意：先把之前基于vue2的版本的禁止掉

2. Logger Plugin 安装

当前的调试工具暂时不支持vuex的调试查看，需要我们额外进行log调试，vuex内置了一个logger模块，我们只需要引入并且注册为插件即可

import { createLogger } from 'vuex'
export default createStore({
  modules: {
    user,
    cart,
    category
  },
  plugins: [
    createLogger()
  ]
})

安装好这个log插件之后，我们每次触发action函数和mutation函数都可以在控制台打印出当前本地提交的记录详细信息，包括名称 参数 修改前后的state数据