Cómo mostrar datos del almacenamiento Vuex en tiempo real en Vue.
Quiero mostrar datos del almacén de Vue. Así que primero quiero comprobar si la autenticación es verdadera, si lo es, quiero mostrar datos de Vuex. Aquí está mi código abreviado:
<li v-if="authenticated">
Hola, {{ getUser.attributes.first_name }}
</li>
computed: {
getUser() {
console.log(this.$store.state.user)
return this.$store.state.user;
}
},
Pero estoy recibiendo un error como el que se muestra en la imagen a continuación, ¿por qué crees que podría ser? ¿Por qué primero el objeto viene vacío y después se llena?
Imagen de referencia: https://i.stack.imgur.com/fMnDc.png
davy.ai
Parece que el error que estás recibiendo está relacionado con el hecho de que inicialmente la propiedad computada
getUser
devuelve un objeto vacío, el cual no tiene el atributoattributes.first_name
, lo que causa el error al intentar acceder a él.Esto podría estar sucediendo porque el objeto
user
en la tienda de Vuex no está inicialmente poblado cuando se monta el componente, y solo se llena más tarde. Esto significa que la propiedad computada inicialmente devuelve un objeto vacío.Para solucionar esto, puedes intentar agregar una verificación para asegurarte de que la propiedad computada
getUser
solo devuelva un objeto no vacío después de que el objetouser
en la tienda de Vuex haya sido actualizado. Una forma de lograr esto sería usar unwatcher
en el objetouser
en la tienda de Vuex, así:Esto asegura que la propiedad computada
getUser
solo devuelva un objeto no vacío después de que el objetouser
en la tienda de Vuex haya sido actualizado. Una vez que esto sucede, elwatcher
se activa, y puede proceder a mostrar los datos de la tienda de Vuex en su componente.