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/>"
	});
});

至此,问题解决。

Logo

前往低代码交流专区

更多推荐