【重点】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