Within the created hook of App.vue, I am initiating a dispatch call to my store. Subsequently, in a child component, I attempt to retrieve this data using a getter. However, an issue arises as the child component is loaded before the data is stored, causing it not to display. Confirming this was the case by logging console output – the first log being from the child component that consumes the store. How can I ensure that the crucial dispatch, which impacts multiple site components, occurs before any other components are loaded?
// App.vue
created() {
this.$store.dispatch(this.$mts.diseases.DISEASES_LIST) //note I tried with async/await to no avail
...
//child component
created() {
this.diseases = this.$store.getters.diseasesList
...
Although I attempted to make the code within App.vue asynchronous, it appears that it does not load first as anticipated, rendering this approach ineffective.