新手上路,vue.js混入mixins求老司机指点！

Question

//init.jsconsthi={asynccreated(){awaitthis.getToken()}}//业务组件mixins:['init']asyncmounted(){awaitthis.getUserInfo()}上述代码为我开发了一个vue全局混入js，每个页面进入都会调用this.getToken()，然后这个方法返回一个token，而业务组件中this.getUserInfo()这个方法调用接口依赖于this.getToken()接口的返回值。目前的问题时，按照上述代码先执行的this.getToken()，后执行的this.getUserInfo()，但是我需要拿到第一个方法的返回值后再去调用this.getUserInfo()方法，但是现在第一个接口调用后，立马去调第二个接口，此时我还没有拿到第一个接口返回来的token。init.js为公共js这个问题应该怎么解决

Answer 1

解决方式很多种，在我看来最简单的方案就是在init.js后面触发个自定义钩子
consthi={
asynccreated(){
awaitthis.getToken()
this.getTokenAfter&&this.getTokenAfter()
}
}
然后把你写在mounted里面的方法放在methods下面这个自定义钩子里
methods:{
getTokenAfter:asyncfunction(){
awaitthis.getUserInfo()
},
                            

Answer 2

首先你的这种方式使用并不能保证生命周期函数之间是同步执行的，只能保证生命周期函数内部是同步执行的，你可以这样
//init.js
consthi={
asynccreated(){
awaitthis.getToken()
this.getUserInfo()
},
methods:{
getUserInfo(){}//啥都不写，具体在相关业务组件中重写即可
}
}
//业务组件
mixins:['init']
methods:{
getUserInfo(){
//你的具体业务代码
...
}
}