I am facing a challenge with my Vue2 component that depends on Vuex to fetch the currently selected node (infoNode) and display its data to the user. In my beforeCreate function, Axios is used to retrieve the top level nodes and set the 'infoNode' as the first node in the process:
async beforeCreate(){
const info = await axios.get('/ajax/company-info')
if(info.data){
this.$store.dispatch("setCompanyInfo", info.data)
}
// Function to retrieve top level node
const topLevel = await axios.get('/ajax/get-root-contents')
if(topLevel.data){
this.$store.dispatch("loadTopLevel", topLevel.data)
}
},
The Vuex function below sets the infoNode
loadTopLevel(state,node){
state.infoNode = node
},
In the following code snippet, I attempt to access the infoNode data and display an icon from an array of valid icons
<v-icon size="6em" v-if="fileIcons[infoNode.data.filetype]">{{ fileIcons[infoNode.data.filetype] }}</v-icon>
Now, within my component, I have a computed property that retrieves this infoNode from the store for rendering. The problem arises when the frontend throws an error stating 'e.infoNode.Data' is undefined.
This error occurs before the request is completed. Once the request finishes, the frontend successfully displays the updated infoNode data.
I have attempted several variations of beforeCreate (async and non), as well as created/mounted cycles, but haven't been able to resolve the issue. Is there a way to ensure the data is set in the store before the component attempts to access it?