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 插件能夠幫助到廣大開發者。