创建帐户后，displayName始终返回null

Question

我有一个使用Firebase作为后端的Vue应用程序。使用电子邮件和密码选项注册新用户。这是firebase方法：

import Logo from '~/components/Logo.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'
import Axios from "axios";
import {mapState, mapActions, mapMutations} from 'vuex'

export default {
  components: {
    Logo,
    VuetifyLogo
  },
  computed: mapState({
    message: state => state.message
  }),
  methods: mapMutations([
    "reset",
    "setMessage"
  ])

在我的main.js文件中，我具有如下所示的onAuthStateChanged方法：

firebase.auth()
          .createUserWithEmailAndPassword(this.user.email, this.user.password)
          .then((res) => {
            res.user
              .updateProfile({
                displayName: this.user.username,
              })
              .then(() => {
              });
          })
          .catch((error) => {
            this.error = error.message;
            console.log("err", error);
          });

此方法当然是在注册用户时触发的。问题是我无法访问用户的displayName属性，由于某种原因，在注册用户时该属性始终为null。当我刷新页面时，它具有值，但是在注册其null并将其将null值作为用户名传递给Vuex之后立即具有值。奇怪的是，例如可以立即访问电子邮件。这是我的控制台的屏幕截图：

第一部分是“ console.log（“ user”，user）”，然后是其他打印内容。正如您在用户对象中看到的那样，displayName有一个值，但是当我调用user.displayName时，它的值空。

有人可以向我解释为什么会这样吗？预先感谢！

Answer 1

这是因为updateProfile()方法是异步的，不会触发通过onAuthStateChanged()设置的侦听器。

因此，在创建（并登录）用户后立即触发onAuthStateChanged()侦听器时，因为创建用户帐户后用户也已登录，displayName的值为尚未更新。

当updateProfile()方法返回的承诺解决后，您可能应该在Vuex商店中更新State。

以下内容：

  firebase
    .auth()
    .createUserWithEmailAndPassword(this.user.email, this.user.password)
    .then((res) => {
      return res.user.updateProfile({
        displayName: this.user.username,
      });
    })
    .then(() => {
      //Update the Vuex Store here with firebase.auth().currentUser
      console.log(firebase.auth().currentUser.displayName);
    })
    .catch((error) => {
      this.error = error.message;
      console.log('err', error);
    });