1、项目有这样的需求、或者是设计吧。项目在浏览器一打开,初始化时需要向服务端发起请求,获取初始化参数,而这些参数需要在所有的子模块(组件)中需要用到。
2、现在的实现思路是在main.js中,在created钩子函数发起请求,将结果存放在vuex中用于各个模块共享。其他子模块在mounted钩子函数中拿取vuex中的参数,再进行其他处理。各个模块通过路由链接。但是因为axios请求的异步性,导致子组件开始mounted时,之前的请求结果还没返回。
3、后来在试着在main.js的created钩子函数中使用await async promise等机制来保证同步,后来还是不行,await async 不能阻塞vue生命周期钩子函数的执行。这就导致获取数据一直滞后。
4、有大神能提供解决方法嘛?或者我的思路有问题?
5、main.js:
new Vue({
render: h => h(App),
store: store,
methods: {
async seturl() {
},
get() {
var _this = this;
return new Promise((resolve) => {
_this.$axios.get(require.systemInfo).then(function (response) {
resolve(response.data)
}).catch(function (err) {
})
})
},
b() {
window.console.log("处理后面的函数!")
}
},
async created () {
window.console.log("开始发送请求!")
var v = await this.get();
window.console.log(v)
this.$store.commit('setUrls', v);
this.b();
/*this.iserverUrl = this.$store.state.AppInformation.urls.iserver;*/
}
}).$mount('#app')
大致 思路不变。首先你在main里面通过异步获取了初始参数。但是由于异步的不确定性,导致在子组件中没有办法在mounted的时候,正确的获取到数据。
那么是否可以在子组建中使用watch 来监听 vuex中初始数据呢。如果watch到了数据变化,且是正确的数据,这个时候在执行相应的函数,是不是就可以了。