刷新后显示名称

Question

我使用 vue 和 firebase 和 firestore

我在注册时会自动登录。 问题是自动登录后，我的名字需要刷新才能更新。

下面是描述的图片。

刷新前

刷新后

{{ user.displayName }}

  created () {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.user = user
      } else {
        this.user = ''
      }
    })
  }                        in Navbar.vue


methods: {
async SignUp () {
  await firebase.auth().createUserWithEmailAndPassword(this.user.email, this.user.password)
    .then((res) => {
      res.user.updateProfile({
        displayName: this.user.name
      })
      const uid = firebase.auth().currentUser.uid
      const createdAt = new Date()
      db.collection('users').add(
        {
          name: this.user.name, email: this.user.email, createdAt, uid
        }
      )
      alert('success!')
      this.$router.push({ name: 'Home' })
    })
    }
  }                       in register.vue

有没有办法不刷新就更新用户名？

如果我通过登录窗口登录，我不必刷新它。 如果我注册后通过自动登录登录，用户名不会出现。

Answer 1

我不确定这个函数有什么问题，但是 {{ user.displayName }} 建议您在数据或计算中（无论您是否使用 vuex）有一个 user 条目

无论user 的数据存在于何处，当您更新显示名称时，您必须执行this.user = {key: value}（重置整个用户条目）或Vue.set(this.user, 'key', value)（使用新值更新key）。

在您的情况下，密钥是displayName。

更多详情可以阅读这里https://vuejs.org/v2/guide/reactivity.html#For-Objects