# onLaunch异步于onLoad之前，保证两者的顺序
很多情况下有这样需求？怎么办？？？其实很简单啦 废话咋们就不多说了 直接上干货！
# 使用vuex广播数据
其实这种方式并不是能准确的按顺序触发事件，不过可以能完成这样的需求 先看看代码咯？
# store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userInfo:{}
},
mutations: {
changeUserInfo(that,info){
that.userInfo=info;
}
}
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# App.vue
<script>
import {
mapMutations
} from 'vuex'
export default {
methods:{
...mapMutations(['changeUserInfo'])
},
onLaunch: function() {
setTimeout(()=>{
this.changeUserInfo({name:'hhyang'});
},2000)
console.log('App Launch')
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# index.vue
<template>
<div>
<p>{{ userInfo.name }}</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
data() {
return {}
},
watch: {
userInfo: function(val) {
console.log(val);
}
},
onLoad() {},
computed: {
...mapState(['userInfo'])
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
一眼看去很清晰！在 onLaunch 生命周期中 两秒之后提交了一个 mutation 它修改了 userInfo 。在实际的 app 启动过程中 并不是等待 onLaunch 完成后才执行下面的生命钩子，所以如果想在 app.vue 中判断登陆或者其他异步操作时，首页的生命周期是不同于理想状态下执行的。那么怎么办？ vuex 可以广播数据，所以在首页 你可以尝试吧 index.vue 中 onload 事件中的代码提到 watch 中，等待数据变化再执行后续的操作。但是这样会有很多问题，比如说 userInfo 发生变化的时候。当然！你控制的好我没话说？对于其他同学怎么办？那就的换其他的方式进行操作。我们还是想还原我们理想的生命钩子执行顺序，看下一步！ vuex 广播数据废弃。