微信小程序 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