Currently, I'm in the process of developing a web application and have begun implementing authentication using firebase. Successfully setting up the login interface, my next step is to propagate this data throughout the entire app.
Not utilizing Vuex, I attempted to establish a global variable by using Vue.prototype.$userData= {} to avoid the hassle of passing it down the components.
This code snippet initializes the variable in app.js:
mounted() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
//RETAINING ADDITIONAL USER DATA HERE
firebase
.firestore()
.collection('users')
.doc(user.uid)
.get()
.then(function(doc) {
if (doc.exists) {
console.log(doc.data()) //THIS LOG WORKS
Vue.prototype.$userData = {...user, ...doc.data()};
} else {
// doc.data() will be undefined in this case
console.log('No such document!');
}
})
.catch(function(error) {
console.log('Error getting document:', error);
});
}
});
}
After that, an attempt was made to use it in a component as shown below:
computed: {
username: function () {
if(this.$userData) {
return this.$userData.naam;
} else return "-";
}
}
Yet, the computed property does not seem to update once $userData finishes processing. Could there be an issue with how the global variable is being utilized?
P.S. Whenever modifications are made to the code resulting in a recompilation during npm run serve, the username displays correctly. However, upon refreshing the page, it fails to work again.