在 vue 组件中查看 vuex 定义

[spivet]

在进行 vue 项目开发的时，如果项目中用到了 vuex 做状态管理，经常需要查看 store 里面定义的状态属性。但是在 vue 组件中引用这些 vuex 属性，并非像引用静态资源那样通过路径去查找，所以不能直接跳转到定义。

针对这个痛点，我写了一个 vscode 的插件 vuex peek，效果如下：

使用方法

我们在组件中使用 state 和 action 这些属性和方法时，完全不能体现出路径，所以要想实现跳转，就必须遵循一定的规则，才能解析。

1. 所有定义 vuex 相关的 store 文件都要放在 store 文件夹里，如果你的项目很简单，只有一个 store.js，那这个插件对你就暂时没有用。

2. mutations actions getters 这些都要作为一个模块单独分开，就像这样：

3. 在组件中声明这些 vuex 属性时，需要添加以下前缀：

   // Add `vxs` for State alias
   ...mapState({
       vxsAccountInfo: state => state.account.accountInfo
   })
   // Add `vxg` for Getters alias
   ...mapGetters({
       vxgDoneCount: 'doneCount'
   })
   // Add `vxa` for Actions alias
   ...mapActions({
       vxaGetStudent: 'student/getStudent'
   })
   // Add `vxm` for Mutations alias
   ...mapMutations({
       vxmSetStudent: 'student/setStudent'
   })

4. 需要在 settings.json 中配置 store 文件夹在工程里的位置，因为我们的工程是多页面，每个页面都有一个对应的 store，如果不配置，默认是 src，所以如果你的项目只有一层，那就不需要配置这个：

   {
     ...
     "vuex_peek.storePath": [
       "src/entries/manager",
       "src/entries/teacher",
       "src/entries/student"
     ]
   }

我目前在自己的工程里使用了一下，暂时没什么问题，大家可以下载试试，有问题可以提 issue 或者直接提 PR，后面我也会对代码进行一些修改，尽量减少上面的限制。

相关参考

VS Code 插件开发攻略
VS Code 插件开发文档
VS Code API