原文：在 vue 組件中查看 vuex 定義

在進行 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，后面我也會對代碼進行一些修改，盡量減少上面的限制。

轉載于:https://juejin.im/post/5cbacb70f265da03612ee59d

總結

以上是生活随笔為你收集整理的在 vue 组件中查看 vuex 定义的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。