微信小程序 mpvue ，vuex配置問題

 【重點】page對應的main.js配置:

import Vue from 'mpvue';
import Person from './person.vue';
import store from '@/store';

const app = new Vue({
  ...Person,
  store
});
app.$mount();

 問題：

   第一次用Mpvue編寫微信小程序，配置Vuex時發現mapGetters映射無法識別。

   參考了網上現有的資料：解決mpvue + vuex開發微信小程序，vuex輔助函數mapState，mapGetters不可用問題

 詳解：

   問題是解決了，但是擁有強迫症的我無法容忍如此“不美麗”的解決方案，經過測試發信是vuex的配置問題：

   app.vue的main.js

import Vue from 'mpvue';
import App from './App';
import store from './store';
import api from 'common/js/api';
Vue.config.productionTip = false;
Vue.prototype.$api = api;
App.mpType = 'app';

const app = new Vue({
  ...App,
  store
});
app.$mount();

...
...

  沿襲VUE的vuex的配置，VUE中的vuex一般配置到app.vue的main.js下，其他組件可以輕鬆通過mapGetters，mapActions等映射訪問存儲的屬性和方法，每個組件中不需要再次配置，（新手一枚，核心原理恕不能詳解）

而mpvue中由於微信小程序的工程結構，加入了網頁，將小程序的每個頁面單獨抽離，渲染相應頁面時需要在對應的main.js中配置（原諒我的無知，目前只知道這種方式）

如果你在app.vue的main.js中配置了vuex，嘗試過的話，在app.vue裏面是可以正常使用mapGetters，mapActions等映射關係的，在某個頁面裏面卻出現mapGetters映射無法識別，mapActions是正常的，原因就是相應的main.js中未配置

解決方法

例如需要在person.vue中使用mapGetters，mapActions等映射關係：

如圖1所示，需要在person.vue對應的main.js配置

import Vue from 'mpvue';
import Person from './person.vue';
import store from '@/store';

const app = new Vue({
  ...Person,
  store
});
app.$mount();

2，計算出映射mapGetters等：

<script type="text/ecmascript-6">
  import {mapGetters, mapActions} from 'vuex';
  export default{
    computed: {
      ...mapGetters([
        'userinfo'
      ])
    },
    mounted() {
      console.log('person:->>userinfo', this.userinfo);
    },
    methods: {
      ...mapActions([
        'setUserInfo'
      ])
    }
  };
</script>

3，測試