解決mpvue + vuex 開發微信小程式,vuex輔助函式mapState、mapGetters不可用問題
前言
最近博主正在用微信小程式開發一款網上商城系統。恰好趕上了美團開源的小程式開發框架mpvue。該框架繼承了vue.js的特性,用起來還是蠻爽的。然後在開發中,資料倉庫這塊懵逼了, 引入的vuex的輔助函式mapState、mapGetters、mapMutations、mapActions等怎麼就不能用呢。苦惱之際開啟D盤,一番愉悅之後,終於想通啦…
問題分析
vuex輔助函式
首先簡單說一下vuex的輔助函式mapState、mapGetters、mapMutations、mapActions,我們在子元件經常用到很多狀態量,為了避免過分的使用this.$store.state.xxx
this.$store.dispatch
導致的冗餘問題,我們用輔助函式來使程式碼變得簡潔易讀。注意了,它就相當於語法糖似的,實際上還會對映為this.$store.吧啦吧啦
vue-cli + vuex
專案
在一般的vue-cli + vuex
專案中,主函式main.js
中會將 store 物件提供給 “store” 選項,這樣可以把 store 物件的例項注入所有的子元件中,從而在子元件中可以用this.$store.state.xxx
、this.$store.dispatch
等來訪問或操縱資料倉庫中的資料new Vue({ el: '#app', store, router, template: '<App/>'
mpvue + vuex
專案
注意了,在mpvue + vuex
專案中,很遺憾不能通過上面那種方式來將store物件例項注入到每個子元件中(至少我嘗試N種配置不行),也就是說,在子元件中不能使用this.$store.吧啦吧啦
,從而導致輔助函式不能正確使用。這個時候我們就需要換個思路去實現,要在每個子元件中能夠訪問this.$store
才行。
解決辦法
這裡呢,博主使用的方法很簡單,既然我們需要在子元件中用this.$store
訪問store例項,那我們直接在vue的原型上新增$store屬性指向store物件不就行啦,抱著試一試的心態寫了下面這行程式碼。
Vue.prototype.$store = store
這樣一來我們在子元件中便可以用this.$store
訪問物件。確實也解決了輔助函式不能使用的問題。
來自某切圖仔的低沉怒吼
原本是準備吐槽設計師的,結果被每個某個平胸小蘿莉給吐槽了一頓審美,沒啥別的,祝她永遠年輕態