mpvue还在维护吗_mpvue 问题汇总（持续更新）

上来做前后端通信测试，就遇到一个奇怪的问题，钩子函数不运行了。

我也不知道具体是为什么，我觉得可能的原因是删除了东西之后dist是不会直接重新编译的。

我把dist文件夹删掉重新编译问题就解决了

Vuex使用

Setting data field "$root.0.registered" to undefined is invalid.

复制代码

因为我用了这么一段去读取storage，必须做一个判断，是undefined不能赋值。

另外state的赋值不能在回调中做，需要用一个闭包把data拿出来用。

initStates(states) {

for (var key in states) {

var data

mpvue.getStorage({

key,

success(res) {

data = res.data

}

})

if (data) {

states[key] = data

}

}

},

复制代码

EventBus

事件总线建议不要用来做通信，mpvue的一个核心优势就是适配vuex，通信用vuex是最好的 即使你只是一个小项目

，vuex的使用成本本身很低。

那么什么情况下需要用到事件总线呢？

需求场景

我不希望登录逻辑只做在第一个页面渲染的时候，在所有需要登录的情况都能检查一遍登录。

思路

使用一个vue实例作为事件总线，监听 loginRequired

事件，执行登录逻辑。这里的登录逻辑是异步函数，因为小程序的接口是异步的。

触发事件的实例阻塞后续逻辑，持续监听 loginState

状态判断登录是否完成。

可以看到事件总线可以作为一个全局使用方法的封装，搭配Vuex可以很好地执行一些异步的功能。

实现

这里实现单独拿出来说，因为mpvue的机制和Vue不一样。

下面是我实现登录逻辑使用的eventbus

import Vue from 'vue'

import { login } from './utils/index' // 封装的一个异步登录函数

var bus = new Vue({

methods: {

login: async function () {

var state = this.$store.state

if (state.global.loginState <= 0) {

this.$store.commit('changeLoginState', 1)

await login.call(this)

} else {

return

}

},

}

})

bus.$on('loginRequired', () => {

console.log('on event loginRequired');

this.a.login()

})

export default bus

复制代码

讲一下细节

$on

不能写在mounted里面

这里涉及到一个重要的点， mpvue中每个页面是一个独立的vue实例

。

我没有看mpvue的源码，反正这个mounted是不执行的，我测试了一下，APP.vue的mounted也是不执行的.

文档上没有注意到对这个的说法, 如果我眼瞎还请指正.

斗胆猜测一下，mpvue改了runtime，所以 new Vue()

的时候把init的一系列方法执行了，看到有文章说在打开小程序的时候所有页面的 created

钩子都执行了，而 beforMounted

和 mounted

钩子都是在 onReady

之后执行的，可以得出一定要访问页面才会执行 mounted

。

this并不指向实例

注意到调用method的时候使用的是 this.a.login()

。这个是mpvue预编译的造成的，具体的可以看一下预编译后的main.js。