在进行 vue 项目开发的时,如果项目中用到了 vuex 做状态管理,经常需要查看 store 里面定义的状态属性。但是在 vue 组件中引用这些 vuex 属性,并非像引用静态资源那样通过路径去查找,所以不能直接跳转到定义。
针对这个痛点,我写了一个 vscode 的插件 vuex peek,效果如下:
使用方法
我们在组件中使用 state 和 action 这些属性和方法时,完全不能体现出路径,所以要想实现跳转,就必须遵循一定的规则,才能解析。
-
所有定义 vuex 相关的
store
文件都要放在 store 文件夹里,如果你的项目很简单,只有一个store.js
,那这个插件对你就暂时没有用。 -
mutations
actions
getters
这些都要作为一个模块单独分开,就像这样:
-
在组件中声明这些 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' })
-
需要在
settings.json
中配置 store 文件夹在工程里的位置,因为我们的工程是多页面,每个页面都有一个对应的 store,如果不配置,默认是src
,所以如果你的项目只有一层,那就不需要配置这个:{ ... "vuex_peek.storePath": [ "src/entries/manager", "src/entries/teacher", "src/entries/student" ] }
我目前在自己的工程里使用了一下,暂时没什么问题,大家可以下载试试,有问题可以提 issue 或者直接提 PR,后面我也会对代码进行一些修改,尽量减少上面的限制。