解決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/>',
  components: { App }
  })
             

• mpvue + vuex

  項目

  注意了，在

  mpvue + vuex

  項目中，很遺憾不能通過上面那種方式來将store對象執行個體注入到每個子元件中（至少我嘗試N種配置不行），也就是說，在子元件中不能使用

  this.$store.吧啦吧啦

  ，進而導緻輔助函數不能正确使用。這個時候我們就需要換個思路去實作，要在每個子元件中能夠通路

  this.$store

  才行。

解決辦法

這裡呢，部落客使用的方法很簡單，既然我們需要在子元件中用

this.$store

通路store執行個體，那我們直接在vue的原型上添加$store屬性指向store對象不就行啦，抱着試一試的心态寫了下面這行代碼。

Vue.prototype.$store = store
           

這樣一來我們在子元件中便可以用

this.$store

通路對象。确實也解決了輔助函數不能使用的問題。

來自某切圖仔的低沉怒吼

原本是準備吐槽設計師的，結果被每個某個平胸小蘿莉給吐槽了一頓審美，沒啥别的，祝她永遠年輕态