如何在 vue 中使用全局变量，它不会更新计算变量?

Question

我正在构建一个网络应用程序，现在正在使用Firebase实现身份验证。 我让登录界面正常工作，现在我想将此数据共享给应用程序的其余部分。

由于我没有使用 Vuex，我尝试使用 Vue.prototype.$userData= {} 来创建一个全局变量，这样我就不必担心传递它。

我在应用程序中创建变量.js如下所示：

mounted() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
//RETRIEVING SOME EXTRA 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);
});
}
});
}

然后我尝试在这样的组件中使用它：

computed: {
username: function () {
if(this.$userData) {
return this.$userData.naam;
} else return "-";
}
}

但是当$userData结束时，它似乎没有更新。这里出了什么问题。 计算的不会在全局变量上更新吗？

附言当我对代码进行更改以使构建在 npm 运行服务中重新编译时，就会出现用户名。当我刷新页面时，它不再起作用。

Answer 1

使用watch而不是计算属性。

watch:{
'$userData' = function(newValue){
...
this.name = newValue.name;
...
}
}

获取更多信息： https://flaviocopes.com/vue-watchers/

PS：假设您可以在整个 Vue 应用程序中访问$userData。