微信小程序 mpvue ，vuex配置問題,（補充：初步解決 微信開發者工具dist目錄下不生成wxml文件的Bug）

 【重點】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，測試

2018-10-12最新補充：

最近發現相關BUG，某個Pages下的頁面按照這種方法配置過VueX之後，在微信開發者工具中，dist目錄下開發者工具無法編譯生成對應頁面的wxml文件，原因是不識別以下寫法，

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

這種寫法是我參照app.vue 的main.js的寫法，當然具體應該是webpack的配置問題，鑑於筆者對Node.js 以及webpack的配置瞭解不多，相關配置測試還沒有測試出來，先用一種“笨”方法解決這個Bug,

解決方式：

先改成原本常規寫法：

import Vue from 'mpvue';
import Person from './person.vue';
const app = new Vue(Person);
app.$mount();

然後打開微信開發者工具編譯，dist目錄下就可以生成相應的wxml文件，然後再修改main.js便可解決此Bug