错误：[vuex] 不要使用 Firebase Auth 对象在突变处理程序之外改变 vuex 存储状态

Question

我已经尝试解决这个问题几个小时了，但无济于事。有人可以帮我找出问题吗？

我得到的错误是： 错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态

这是我的登录脚本部分，其中包含 login() 中的违规函数

<script>
import { auth, firestoreDB } from "@/firebase/init.js";
export default {
  name: "login",
  props: {
    source: String
  },
  ////////
  layout: "login",
  data() {
    return {
      show1: false,
      password: "",
      rules: {
        required: value => !!value || "Required.",
        min: v => v.length >= 8 || "Min 8 characters",
        emailMatch: () => "The email and password you entered don't match"
      },
      email: null,
      feedback: null
    };
  },

  methods: {
    login() {
      if (this.email && this.password) {
        auth
          .signInWithEmailAndPassword(this.email, this.password)
          .then(cred => {
            //this.$router.push("/");
            this.$store.dispatch("user/login", cred);
            console.log()
            this.$router.push("/forms")
            console.log("DONE")
          })
          .catch(err => {
            this.feedback = err.message;
          });
      } else {
        this.feedback = "Please fill in both fields";
      }

    },

    signup() {
      this.$router.push("signup");
    }
  }
};
</script>

import { auth, firestoreDB } from "@/firebase/init.js";

export const state = () => ({
    profile: null,
    credentials: null,
    userID: null
})

export const getters = {
    getinfo:(state) =>{
        return state.credentials
    },
    isAuthenticated:(state)=>{
        if (state.credentials != null) {
            return true
        } else {
            return false
        }
    }
}

export const mutations = {
    commitCredentials(state, credentials) {
        state.credentials = credentials
    },
    commitProfile(state, profile) {
        state.profile = profile
    },
    logout(state){
        state.credentials = null,
        state.profile = null
    }
}

export const actions = {

    login({commit},credentials) {

        return firestoreDB.collection("Users").where('email', '==', auth.currentUser.email).get()
            .then(snapshot => {
                snapshot.forEach(doc => {
                    let profile = {...doc.data()}
                    commit("commitCredentials", credentials)
                    commit("commitProfile", profile)

                })
            }).catch((e) => {
                console.log(e)
            })
    },
    credentials({ commit }, credentials) {
        commit("commitCredentials",credentials)
    },

    logout() {
        commit("logout")
    },


}

我已经检查过没有其他地方直接调用商店状态。 我已经弄清楚，如果我不执行使凭据发生突变的 commitCredentials 突变，那么问题就不会发生。 要添加的另一个注意事项，错误会一直打印到控制台，就好像它在 for 循环中一样。所以我的控制台充斥着同样的信息。 我很确定这与 firebase 身份验证登录以及凭据对象如何在我不知道的情况下被它更改有关，但我似乎无法缩小范围。

非常欢迎任何帮助。

Answer 1

找到答案了。

https://firebase.nuxtjs.org/guide/options/#auth

signInWithEmailAndPassword(this.email, this.password) .then(cred)

“不要将 authUser 直接保存到商店，因为这会将对象引用保存到由 Firebase Auth 定期直接更新的状态，因此如果 strict != false 会引发 vuex 错误。”

firebase 库不断更改凭据对象，传递凭据对象只是传递引用而不是实际值本身。

解决方案是只保存对象中的值。