Within my page, I have implemented an asynchronous fetch method to initialize data:
async fetch() {
const res = await requestApi(this, '/database');
this.sliderData = res.homeSlider;
this.modelData = res.model;
...
}
To pass this data down to child components via props becomes cumbersome due to the nested nature of the components up to levels 3-4. Is it feasible to utilize provide/inject in this scenario while ensuring that the transmitted data remains reactive? When attempting to utilize provide/inject, objects are always empty as the data has not been initialized yet:
provide() {
return {
sliderData: this.sliderData
};
}
This results in passing an empty object before the data is fully initialized.