状态不会完全改变

Question

我有这个登录系统。当用户登录时，我的操作将我的状态设置为数据（用户名、电子邮件和用户 ID）我从 firebase 身份验证中检索并存储在一个名为 newUser 的变量中，因此我可以访问它并在 @987654322 上显示其中的一些@。根据我vuex action 中的控制台日志，信息存储在变量中就好了。但是，当我在应该显示数据的文件中控制台记录数据时，某些数据没有通过。 userId 和 email 通过就好了，但 username 通过 undefined。什么会导致这个问题，我该如何解决这个问题？

这是我处理数据的代码：

  state: {
    user: null
  },

  mutations: {
    setUser(state, payload) {
      state.user = payload;
  },

    userLogin({ commit }, payload) {
      commit("setLoading", true);
      commit("clearError");

      firebase
        .auth()
        .signInWithEmailAndPassword(payload.email, payload.password)
        .then(user => {
          commit("setLoading", false);

          const signedInUser = {
            email: payload.email,
            id: user.user.uid,
            username: user.user.displayName
          };

          console.log(signedInUser);
          commit("setUser", signedInUser);
        })
        .catch(err => {
          commit("setLoading", false);
          commit("setError", err);
        });
    },

  getters: {
    user(state) {
      return state.user;
    }
  }

这就是我尝试访问数据以检查它并将其显示在DOM上的方式：

  created() {
    console.log(this.$store.getters.user);
  },

  computed: {
    username() {
      return this.$store.getters.user.username;
  },

我试图将我的用户设置为一个空数组、一个空对象，以及一个带有我想要存储的数据的对象，这意味着：

user: {
    username: null,
    email: null,
    id: null
}

同样，这些方法都不起作用。

非常感谢任何帮助。提前谢谢你。

Answer 1

应该是this.$store.getters.user.username 而不是this.$store.getters.username

  computed: {
    username() {
      const user = this.$store.getters.user
      if (user) {
         return user.username
      }
    }
  },