推薦一個很好用的vscode插件：一個能夠給出vuex中store定義信息的vscode插件

VueThis$Store

想要解決的問題

在使用Vuex管理本身應用的狀態時，由於狀態過多，爲了正確性每次都要打開vuex定義文件，去複製定義時的函數名或者狀態名，無形中就浪費了許多時間，爲了解決這個痛點，開發了這個vscode插件。

經過使用 ast 和正則表達式，獲取 store 中全部文件的定義,在用戶使用.vue 文件中時給 出詳細的提示，目前支持大多數 vuex 官網中定義的例子

安裝

在擴展中搜索 VueThis$Store,安裝便可。

使用

當你打開一個.vue 文件時，插件會掃描從你的入口文件，開始掃描獲得你的 store 全部模 塊，以及模塊中的(actions,mutations, getters, state)，保存必要的定義信息以給出提 示。當你的 vscode 插件的左下角有以下圖標

那麼表明掃描 成功，能夠獲得正確的提示，若是最右邊是 x 則表示發生錯誤（我設置的默 認的入口路徑是工做根路徑下的 src/main.js，若是失敗，會使用備用入口文件 ,src/index.js，若是依然失敗，會提示錯誤讓你本身聲明入口文件）。 你 shift+(cmd|ctrl)+p 輸入 specify entrance path 輸入你的 index 文件，(就是你生 成一個 vue 實例的地方),回車。插件會從新掃描，入口文件。

特性

• 支持最基本的this.$store.state.count類型的提示，當你在其餘的 module 中定義了 其餘的 state 時， 能夠獲得下一層 module 和全部相應 state 的提示。

  

• 同時支持 mapState，當輸入第一個參數時，僅僅提示全部可能的下一個 module（設置了 namespace 的 module） 和官網的機制一致。當設置了命名空間，只會提示當前命名空間 下的 state。

  

• 支持 mapState 參數爲對象的狀況，而且支持三種不一樣函數寫法，經過 ast 獲取函數的 第一個參數給出更加精確的提示。

  

• 支持 從this.$store.getters.xxx這樣的形式直接獲取 getter,也支持 mapGetters 中 第二個參數是數組或者對象的形式

  

• 同理支持this.$store.commit 和this.$store.dispatch 提示

  

• 支持 mapMutations 參數爲數組和對象提示

  

• 支持 mapActions 參數爲數組和對象提示

  

• 監聽你 store 文件夾的變更，當文件發生變更，會從新收集定義信息，提示也會更新

一些提示

由於我沒有什麼使用大型的應用的經驗，因此測試的項目不是不少，我再 github 上找了一 個比較經典的項目vue-elm, 並經過了測試 。可能會有其餘沒有發現的 bug，若是你在使用中發現任何的 bug，你能夠提 issue，最 好能給我 store 的目錄結構，最最好能夠給我每一個原先 store 目錄下全部文件，固然這可 能涉及一些機密，你能夠再原結構不變的狀況下， 保留幾條測試數據就更好了。同時也很是希 望你們能夠給我更多建議，但願這個 vscode 插件可以幫助到廣大開發者。:smile:

目前存在的問題

• 不能向 1.28 及如下兼容，只能最新版本。這個問題目前沒法解決，我也是第一次開發 vscode 插件，對 vscode 兼容這一塊不太瞭解。
• 沒有友好的錯誤提示。
• 由於 vuex 中模塊的寫法不少，能夠直接在對象中定義，能夠從外部引入，能夠先定義在 文件中定義在直接使用{mutations}這樣的方法定義，可能有些寫法沒有覆蓋到沒法得 到提示。

補充

能看到這裏，說明你仍是有點承認這個項目的吧，因此先厚着臉皮放下本身的項目連接吧。

項目地址： vue-this-store

若是對你有幫助，給個 star 吧^_^.