您好,登錄后才能下訂單哦!
這篇文章主要介紹如何解決mpvue+vuex 開(kāi)發(fā)微信小程序vuex輔助函數(shù)mapState、mapGetters不可用的問(wèn)題,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
問(wèn)題分析
?vuex輔助函數(shù)
首先簡(jiǎn)單說(shuō)一下vuex的輔助函數(shù)mapState、mapGetters、mapMutations、mapActions,我們?cè)谧咏M件經(jīng)常用到很多狀態(tài)量,為了避免過(guò)分的使用this.$store.state.xxx、this.$store.dispatch導(dǎo)致的冗余問(wèn)題,我們用輔助函數(shù)來(lái)使代碼變得簡(jiǎn)潔易讀。注意了,它就相當(dāng)于語(yǔ)法糖似的,實(shí)際上還會(huì)映射為this.$store.吧啦吧啦
?vue-cli + vuex項(xiàng)目
在一般的vue-cli + vuex項(xiàng)目中,主函數(shù) main.js 中會(huì)將 store 對(duì)象提供給 “store” 選項(xiàng),這樣可以把 store 對(duì)象的實(shí)例注入所有的子組件中,從而在子組件中可以用this.$store.state.xxx、this.$store.dispatch 等來(lái)訪問(wèn)或操縱數(shù)據(jù)倉(cāng)庫(kù)中的數(shù)據(jù)
new Vue({ el: '#app', store, router, template: '<App/>', components: { App } })
?mpvue + vuex項(xiàng)目
注意了,在mpvue + vuex項(xiàng)目中,很遺憾不能通過(guò)上面那種方式來(lái)將store對(duì)象實(shí)例注入到每個(gè)子組件中(至少我嘗試N種配置不行),也就是說(shuō),在子組件中不能使用this.$store.吧啦吧啦,從而導(dǎo)致輔助函數(shù)不能正確使用。這個(gè)時(shí)候我們就需要換個(gè)思路去實(shí)現(xiàn),要在每個(gè)子組件中能夠訪問(wèn)this.$store才行。
解決辦法
這里呢,博主使用的方法很簡(jiǎn)單,既然我們需要在子組件中用this.$store 訪問(wèn)store實(shí)例,那我們直接在vue的原型上添加$store屬性指向store對(duì)象不就行啦,抱著試一試的心態(tài)寫了下面這行代碼。
Vue.prototype.$store = store
這樣一來(lái)我們?cè)谧咏M件中便可以用this.$store訪問(wèn)對(duì)象。確實(shí)也解決了輔助函數(shù)不能使用的問(wèn)題。
以上是“如何解決mpvue+vuex 開(kāi)發(fā)微信小程序vuex輔助函數(shù)mapState、mapGetters不可用的問(wèn)題”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。