現在、NuxtとFirebaseで認証機能を作成しています。
ログイン、ログアウトの処理自体は実行できてそれに応じたヘッダー表示は変わってくれるのですが、ログインボタンを押した際にconsoleにエラーが出ているという状況です。
エラー内容
Uncaught RangeError: Maximum call stack size exceeded at Function.keys (<anonymous>)
コード
Header.vue(ログインボタンがあるページです)↓
vue
1~ 2 googleLogin () { 3 const provider = new firebase.auth.GoogleAuthProvider() 4 auth.signInWithPopup(provider) 5 .then(res => { 6 this.dialogAuthVisible = false 7 this.$store.dispatch('auth/setUser',res.user) 8 }).catch(e => console.log(e)) 9 } 10~
store/auth.js↓
js
1export const strict = false 2 3export const state = () => ({ 4 user: null 5}) 6 7export const mutations = { 8 SET_USER (state, payload) { 9 state.user = payload 10 } 11} 12 13export const actions = { 14 setUser ({ commit }, user) { 15 commit('SET_USER',user) 16 } 17} 18 19export const getters = { 20 isAuthenticated (state) { 21 return !!state.user 22 } 23}
default.vue↓
vue
1mounted () { 2 auth.onAuthStateChanged(user => { 3 const { uid, displayName, photoURL} = user 4 if (user) { 5 this.$store.dispatch('auth/setUser', { uid, displayName, photoURL}) 6 } else { 7 this.$store.dispatch('auth/setUser', null) 8 } 9 }) 10 }
試したこと
- default.vueでdispatchする部分をuserではなく、単体のプロパティにしてみた。
足りない情報などありましたら教えていただけると????♂️
ご教授お願いします????♂️
あなたの回答
tips
プレビュー