Vue怎么在程序初始化时从后台读取数据加载全局变量
vue项目有时候需要在所有页面mounted之前从后台接口读取数据来初始化全局变量。但是奈何所有页面的mounted都是异步同时调用,而读接口操作通常也是异步返回promise,这样就不免会出现mounted时读接口操作还没有进行完这种情况,所以我想最好有个机制能解决这个问题,让所有读接口初始化全局变量的工作在mounted之前进行,而这种机制应该对读接口是否同步异步没有要求,即使异步也能保证
·
vue项目有时候需要在所有页面mounted之前从后台接口读取数据来初始化全局变量。但是奈何所有页面的mounted都是异步同时调用,而读接口操作通常也是异步返回promise,这样就不免会出现mounted时读接口操作还没有进行完这种情况,所以我想最好有个机制能解决这个问题,让所有读接口初始化全局变量的工作在mounted之前进行,而这种机制应该对读接口是否同步异步没有要求,即使异步也能保证在接口返回后再执行mounted。
目前想到的解决方法将main.js中new Vue的操作放到异步读取接口的callback回调函数中执行。main.js中newVue操作将会初始化所有components,只有初始化components后才会调用各个需要部件的mounted函数,而将newvue放到callback中执行就可以保证只有执行回调才会开始初始化components,然后我们将调用接口的工作放到一个单独的js业务处理中,在main中调用该js即可。
下面举例说明:
单独js业务处理模块,用于调用后台接口初始化全局变量:
define([...],function(....){
function globalpreinit(callback){
this.callbackfunction=callback;
this.initfuncs=function(){
this.initfuncnum=2;//此处数字代表有几个初始化函数,一般一个函数处理一个接口
this.currentinitednum=0;
initfunc1(this.testifcallback);
initfunc2(this.testifcallback);
...//此处逐个调用个初始化函数,函数入参是一个计数函数
}
var that=this;
this.testifcallback=function(){
that.currentinitednum++;
if(that.currentinitednum==that.initfuncnum&&that.callbackfunction!=null){
that.callbackfunction();
}
}
this.initfunc1(callback){
...
}
this.initfunc2(callback){
...
}
...
return globalPreInit;
}
}
然后main.js中这样初始化全局vue
new globalpreinit(function(){
new Vue({
el:"#app",
router,
components:{App},
template:"<App/>"
});
});
至此,问题解决。
更多推荐
已为社区贡献5条内容
所有评论(0)