推薦一個很好用的vscode插件:一個可以給出vuex中store定義信息的vscode插件

VueThis$Store

想要解決的問題

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

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

安裝

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

使用

當你打開一個.vue 文件時,插件會掃描從你的入口文件,開始掃描得到你的 store 所有模
塊,以及模塊中的(actions,mutations, getters, state),保存必要的定義信息以給出提
示。當你的 vscode 插件的左下角有如下圖標
statusBarItem
那麼代表掃描 成功,可以得到正確的提示,如果最右邊是 x 則表示發生錯誤(我設置的默
認的入口路徑是工作根路徑下的 src/main.js,如果失敗,會使用備用入口文件
,src/index.js,如果依然失敗,會提示錯誤讓你自己聲明入口文件)。
shift+(cmd|ctrl)+p 輸入 specify entrance path 輸入你的 index 文件,(就是你生
成一個 vue 實例的地方),回車。插件會重新掃描,入口文件。

特性

  • 支持最基本的this.$store.state.count類型的提示,當你在其他的 module 中定義了
    其他的 state 時, 可以得到下一層 module 和所有相應 state 的提示。
    state
  • 同時支持 mapState,當輸入第一個參數時,僅僅提示所有可能的下一個 module(設置了
    namespace 的 module) 和官網的機制一致。當設置了命名空間,只會提示當前命名空間
    下的 state。
    mapState
  • 支持 從this.$store.getters.xxx這樣的形式直接獲取 getter,也支持 mapGetters 中
    第二個參數是數組或者對象的形式
    mapGetters
  • 同理支持this.$store.committhis.$store.dispatch 提示
    commit

dispatch

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

一些提示

因爲我沒有什麼使用大型的應用的經驗,所以測試的項目不是很多,我再 github 上找了一
個比較經典的項目vue-elm, 並通過了測試
。可能會有其他沒有發現的 bug,如果你在使用中發現任何的 bug,你可以提 issue,最
好能給我 store 的目錄結構,最最好可以給我每個原先 store 目錄下所有文件,當然這可
能涉及一些機密,你可以再原結構不變的情況下, 保留幾條測試數據就更好了。同時也非常希
望大家可以給我更多建議,希望這個 vscode 插件能夠幫助到廣大開發者。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章