推薦一個很好用的vscode外掛：一個可以給出vuex中store定義資訊的vscode外掛
阿新 • • 發佈：2018-12-10
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。
- 支援 從
this.$store.getters.xxx這樣的形式直接獲取 getter,也支援 mapGetters 中 第二個引數是陣列或者物件的形式 - 同理支援
this.$store.commit和this.$store.dispatch提示
-
支援 mapMutations 引數為陣列和物件提示
-
支援 mapActions 引數為陣列和物件提示
一些提示
因為我沒有什麼使用大型的應用的經驗，所以測試的專案不是很多，我再 github 上找了一 個比較經典的專案vue-elm, 並通過了測試 。可能會有其他沒有發現的 bug，如果你在使用中發現任何的 bug，你可以提 issue，最 好能給我 store 的目錄結構，最最好可以給我每個原先 store 目錄下所有檔案，當然這可 能涉及一些機密，你可以再原結構不變的情況下， 保留幾條測試資料就更好了。同時也非常希 望大家可以給我更多建議，希望這個 vscode 外掛能夠幫助到廣大開發者。:smile: