Currently, I am utilizing Vuex to store a tree structure within the state property.
This data is retrieved via an ajax call.
The issue arises when the page renders before the variable in the state property has been fully populated.
For example:
// sth.ts file
state: {
map: {}
},
...
actions: {
getData({ commit }){
axios.get(...).then(... populate map ...).catch(...)
}
}
// sthelse.vue file
<template>
<div>
<h1>Tree structure</h1>
<ul >
<item v-for="child in map[root]"
:key="child.id"
:name="child.name"
:children="child.Children">
</item>
</ul>
</div>
</template>
I have conducted searches online but haven't come across a solution that addresses this specific issue. Has anyone encountered a similar problem before?
Is there any proven way to handle this situation effectively?