前言

最近博主正在用微信小程序開發(fā)一款網(wǎng)上商城系統(tǒng)。恰好趕上了美團(tuán)開源的小程序開發(fā)框架mpvue。該框架繼承了vue.js的特性，用起來還是蠻爽的。然后在開發(fā)中，數(shù)據(jù)倉庫這塊懵逼了, 引入的vuex的輔助函數(shù)mapState、mapGetters、mapMutations、mapActions等怎么就不能用呢。苦惱之際打開D盤，一番愉悅之后，終于想通啦…

問題分析

•vuex輔助函數(shù)

 首先簡(jiǎn)單說一下vuex的輔助函數(shù)mapState、mapGetters、mapMutations、mapActions，我們?cè)谧咏M件經(jīng)常用到很多狀態(tài)量，為了避免過分的使用this.$store.state.xxx、this.$store.dispatch導(dǎo)致的冗余問題，我們用輔助函數(shù)來使代碼變得簡(jiǎn)潔易讀。注意了，它就相當(dāng)于語法糖似的，實(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 等來訪問或操縱數(shù)據(jù)倉庫中的數(shù)據(jù)

new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: { App }
})

•mpvue + vuex項(xiàng)目

 注意了，在mpvue + vuex項(xiàng)目中，很遺憾不能通過上面那種方式來將store對(duì)象實(shí)例注入到每個(gè)子組件中（至少我嘗試N種配置不行），也就是說，在子組件中不能使用this.$store.吧啦吧啦，從而導(dǎo)致輔助函數(shù)不能正確使用。這個(gè)時(shí)候我們就需要換個(gè)思路去實(shí)現(xiàn)，要在每個(gè)子組件中能夠訪問this.$store才行。

解決辦法

這里呢，博主使用的方法很簡(jiǎn)單，既然我們需要在子組件中用this.$store 訪問store實(shí)例，那我們直接在vue的原型上添加$store屬性指向store對(duì)象不就行啦，抱著試一試的心態(tài)寫了下面這行代碼。

Vue.prototype.$store = store

這樣一來我們?cè)谧咏M件中便可以用this.$store訪問對(duì)象。確實(shí)也解決了輔助函數(shù)不能使用的問題。

總結(jié)

以上所述是小編給大家介紹的解決mpvue + vuex 開發(fā)微信小程序 vuex輔助函數(shù)mapState、mapGetters不可用問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論