错误：[vuex]请勿使用Firebase Auth Object对变异处理程序外部的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 auth登录以及在不知不知道的情况下如何更改凭据对象有关，但是我似乎无法缩小范围。

非常欢迎任何帮助。

Answer 1

找到答案。

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

signInWithEmailAndPassword（this.email，this.password）.then（cred）

“不要将authUser直接保存到存储中，因为这将保存对状态的对象引用，该对象引用会由Firebase Auth定期定期更新，因此如果严格！= false，则会抛出vuex错误。”

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

解决方案是仅将值保存在对象中。