Question

我有这个登录系统。当用户登录时，我的操作将我的状态设置为我从firebase身份验证中检索到的数据（用户名，电子邮件和userId）并将其存储在名为newUser的变量中，因此我可以对其进行访问并在其中显示某些内容DOM。根据我的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
      }
    }
  },

状态不会完全变异

1 个答案: