Tengo una aplicación que usa Vue-Router y Vuex (Store).
En el componente Dashboard, se muestra la información del usuario. Vue extrae esa información del usuario de una base de datos (asincrónica) y la envía a la Tienda.
Ahora, en mis subcomponentes, accedo a esta información a través de la Tienda. El problema es que, en la carga inicial de un subcomponente, la entrada del usuario en la tienda está vacía. TypeError: $setup.user is null . Ahora, una forma de evitar esto es colocar un v-if delante de cada elemento. Sin embargo, encuentro que esto es aburrido.
¿Puedo moverme poniendo un v-if en cada elemento html?
Usuario.vue:
<template> <div> <div id="profile_content"> <UserNavbar /> <router-view :key="$route.fullPath" /> </div> </div> </template>Panel de usuario:
<template> <div> <ProfileInformationCard> <span v-if="user">{{ user.name }}</span> <span v-if="user">{{ user.lastLogin }}</span> </ProfileInformationCard> </div> </template> <script> import _ from "lodash"; import { useStore } from "vuex" import { watch } from "vue" export default { setup(){ const store = useStore() const user = store.state.user.currentUser watch(() => _.cloneDeep(store.state.user.currentUser), () => { user.value = store.state.user.currentUser; } ); } } </script>Sería mejor tener algún componente que muestre loading... o algún control giratorio en lugar de toda la ProfileInformationCard como esta:
<div> <ProfileInformationCard v-if="user"> <span>{{ user.name }}</span> <span>{{ user.lastLogin }}</span> </ProfileInformationCard> <Loader v-else /> </div>