在 vue 組件中查看 vuex 定義

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

在進行 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，後面我也會對代碼進行一些修改，儘可能減小上面的限制。