Here's the structure of a parent component and a child component:
export default {
name : 'parentNode',
mounted: function () {
var that = this;
if (that.$store.state.auth.isAuthenticated) {
that.$store.dispatch(ActionsType.GET_ALLCOINLIST).then(function (data) {
// Utilizing store data in child components.
that.$store.state.main.data = data;
});
}
},
};
export default {
name : 'childNode',
data : function(){
return {
childData : {}
}
},
mounted : function(){
//How can I ensure the data is loaded before proceeding?
},
computed : {
childData : function(){
return this.$store.state.main.data;
}
},
watch : {
childData : function(){
this.makeChart();
}
},
methods : {
makeChart : function(){
console.log('Creating a new chart with the data.');
}
}
}
The goal is to update the chart whenever the $store(vuex) data changes. Due to the asynchronous nature of the data response, there is a challenge when the child component loads without the necessary data from the parent.
The ideal scenario is to always have the chart populated with the initially retrieved data when the child component first loads. Vue components load asynchronously, so how can we control this behavior? Currently, the chart might not be generated on initial load of the child component.