有什么东西可以在 vue 中自动更新此代码吗？答案

【问题标题】：Is there something to auto update this code in vue?有什么东西可以在 vue 中自动更新此代码吗？
【发布时间】：2021-03-08 11:41:03
【问题描述】：

我在导航器中找到了这个按钮，当用户登录时会显示该按钮，而当用户注销时该按钮消失了。但现在我需要在按钮删除/出现之前刷新我的页面。这是我的代码： 按钮：

<div v-if="ingelogd">
  <div class="w-2/12 hidden lg:flex" v-for="(data, index) in allIngelogds" :key="index">
    <button @click="uitloggen" class="downloadbtn">
      {{ data.uitloggenKnop }}
    </button>
  </div>
</div>

在data:()我返回这个：

ingelogd: false

然后我创建了一个mounted() 函数来更新用户是否登录：

mounted() {
    const user = firebase.auth().currentUser
    if(user) {
      this.ingelogd = true;
    }
  },

是的，我导入了 firebase 和 firebase/auth，allIngelogds 是一个 graphql 查询。

【问题讨论】：

标签： javascript firebase vue.js nuxt.js

【解决方案1】：

https://stackoverflow.com/a/40586872/8647537

查看上面的答案。懒惰的方法或不是很好的方法将是

vm.$forceUpdate();

虽然这不是一个好方法。在提到的链接中阅读更多内容。

【讨论】：

【解决方案2】：

您需要使用onAuthStateChanged 侦听器而不是currentUser：

mounted() {
  firebase.auth().onAuthStateChanged((user) => {
    if(user) {
      this.ingelogd = true;
    }
  });
},

每次登录状态更改时都会调用onAuthStateChanged 侦听器，从而确保您的ingelogd 始终反映此状态。

有关这方面的更多信息，请参阅 getting the currently signed in user 上的 Firebase 文档中的第一个 sn-p。

【讨论】：