Le contenu logique lancé par la fonction avant l'exécution de la configuration beforeCreate() et created() de l'instance VUE, y compris les données et les méthodes, a été complété
- Logique JS introduite par la configuration :
export default function useProductSetup() {
const getData = (param) => {
//省略异步请求代码
return data;
};
return {
getData
}
}
- Document VUE
setup(props, context) {
const {
getData
} = useProductSetup();
return {
getData
};
},
beforeCreate(){
this.getdata( ); //此时方法已存在
},
A ce moment, car la fonction getdata a une requête asynchrone (la plupart des accès à l'interface en développement sont asynchrones)
mounted() {
let res = this.getData({
Param
});
res;//此时无法获得该异步请求数据,res为空
},
Si vous encapsulez la fonction renvoyée par JS en tant qu'objet de promesse, vous pouvez utiliser await dans l'instance de vue pour obtenir les données pour l'opération (l'essence d'async est d'écrire de manière asynchrone en mode synchrone)
export default function TestSetup() {
const getData = (param) => {
return new Promise((resolve,reject) => {
//省略异步请求代码
resolve(data)；
})
};
return {
getData
}
}
async mounted() {
let res = await this.getData();
res;//此时即可获得该异步请求数据
},
Cela peut également être écrit comme une fonction de rappel
export default function TestSetup() {
const getData = (param,success) => {
//省略异步请求代码
success:success
};
return {
getData
}
}
async mounted() {
await this.getData(param,{
this.$toast.success("成功");//等后续处理代码
//但前提是这里的异步执行在ue实例化之后可以获取vue实例
}
);
},
Mais il n'y a toujours pas de solution au problème qu'il n'y a pas d'instance utilisable par VUE, et il est facile de provoquer un enfer de rappel