时间戳

首页 > 解决方案 > 超出最大调用堆栈大小（在 Nuxt + Firebase 项目中）

firebase - 超出最大调用堆栈大小（在 Nuxt + Firebase 项目中）

问题描述

我目前正在 Nuxt 和 Firebase 中创建身份验证功能。

登录和注销过程本身可以完成，并且标题显示会相应更改，但是当我按下登录按钮时控制台出现错误。

错误内容（在控制台中）

Uncaught RangeError: Maximum call stack size exceeded
    at Function.keys (<anonymous>)

代码

Header.vue(这是包含登录按钮的页面。)↓</p> 

googleLogin () {
      const provider = new firebase.auth.GoogleAuthProvider()
      auth.signInWithPopup(provider)
        .then(res => {
          this.dialogAuthVisible = false
          this.$store.dispatch('auth/setUser',res.user)
        }).catch(e => console.log(e))
 }

store/auth.js↓</p> 

export const strict = false

export const state = () => ({
  user: null
})

export const mutations = {
  SET_USER (state, payload) {
    state.user = payload
  }
}

export const actions = {
  setUser ({ commit }, user) {
    commit('SET_USER',user)
  }
}

export const getters = {
  isAuthenticated (state) {
    return !!state.user
  }
}

default.vue↓</p> 

mounted () {
    auth.onAuthStateChanged(user => {
      const { uid, displayName, photoURL} = user
      if (user) {
        this.$store.dispatch('auth/setUser', { uid, displayName, photoURL})
      } else {
        this.$store.dispatch('auth/setUser', null)
      }
    })
  }

如果有任何我遗漏的信息，请告诉我️。请教我如何做到这一点️。

标签： firebasevue.jsnuxt.js

解决方案

我认为问题出在以下代码行中：

export const mutations = {
  SET_USER (state, payload) {
    state.user = payload
  }
}

export const actions = {
  setUser ({ commit }, user) {
    commit('SET_USER',user)
  }
}

这种突变和动作之间存在一个循环

推荐阅读