Tengo un componente Vue2 que se basa en Vuex para recuperar el nodo seleccionado actualmente (infoNode) para mostrar los datos de ese nodo al usuario. Tengo una función beforeCreate que usa Axios para recuperar los nodos de nivel superior y establecer el 'infoNode' como el primer nodo, como se muestra a continuación:

 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) } },

A continuación se muestra la función Vuex para configurar el infoNode

 loadTopLevel(state,node){ state.infoNode = node },

Aquí es donde trato de obtener los datos de infoNode y mostrar un ícono de una matriz de íconos válidos

 <v-icon size="6em" v-if="fileIcons[infoNode.data.filetype]">{{ fileIcons[infoNode.data.filetype] }}</v-icon>

Ahora, en mi componente, tengo un accesorio computarizado que recupera este infoNode de la tienda para mostrarlo. El problema que tengo es que la interfaz arroja un error que indica que 'e.infoNode.Data' no está definido'.

Este error se lanza antes de que se complete la solicitud. Una vez que se completa la solicitud, la interfaz muestra con éxito el infoNode ya que la tienda se actualiza.

¿Hay alguna forma de que configure estos datos en la tienda antes de que el componente intente obtenerlos? Probé muchas variaciones de beforeCreate (async y non), así como también creado/montado.