前提・実現したいこと
firebaseのログアウト機能を使ってログアウトをしたい
発生している問題・エラーメッセージ
エラーメッセージ ypeError: Cannot read properties of null (reading 'displayName') at Object.eval [as next] (index.js?4360:43) at eval (index.esm.js?a8e9:1392) at eval (index.esm.js?a8e9:1502) //TypeError:nullのプロパティを読み取ることができません( 'displayName'を読み取る)
該当のソースコード
store
import Vue from 'vue' import Vuex from 'vuex' import firebase from 'firebase' import router from '@/router' //import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) export default new Vuex.Store({ state: { username: '', userNames: [], email: '', password: '', }, getters: { setUsername(state) { return state.username }, setUsers(state) { return state.userNames } }, mutations: { registerState(state, payload) { state.username = payload.username state.email = payload.email state.password = payload.password }, loginState(state, payload) { state.username = payload.username state.email = payload.email state.password = payload.password }, setUser(state, payload) { state.username = payload.username } }, actions: { setUser(context, payload) { const db = firebase.firestore() firebase.auth().onAuthStateChanged((username) => { payload.username = username.displayName; }) db.collection('user').orderBy('namber', 'desc').limit(3) .get() .then((querySnapshot) => { querySnapshot.forEach((doc) => { // doc.data() is never undefined for query doc snapshots console.log(doc.get('username')) this.state.userNames.push(doc.get('username')) console.log(this.state.userNames) }); }) .then(() => { context.commit('setUser', payload) }) .catch((error) => { console.log("Error getting documents: ", error); }); console.log(this.state.userNames) }, signOut() { firebase.auth().signOut() .then(() => { router.push('/login') }) .catch((e) => { console.error('エラー :', e.message) }) }, newRegister(context, payload) { firebase .auth() .createUserWithEmailAndPassword(payload.email, payload.password) .then(() => { const user = firebase.auth().currentUser user.updateProfile({ displayName: payload.username, },) .then(() => { // データベースへ登録 const db = firebase.firestore(); db.collection("user").doc(user.uid).set({ uid: user.uid, email: payload.email, password: payload.password, username: payload.username, namber: firebase.firestore.Timestamp.fromDate(new Date()) }) }) .then(() => { context.commit('registerState', payload) }) .then(() => { router.push('/about') })}) .catch((e) => { console.error('エラー :', e.message) }) }, loginUser(context, payload) { firebase .auth() .signInWithEmailAndPassword(payload.email, payload.password) .then(() => { context.commit('loginState', payload) }) .then(() => { console.log("ログイン成功!"); router.push('/about'); }) .catch((e) => { console.error('エラー :', e.message) }) } }, })
vue
<ul> <li class="userList">{{username}}さんようこそ</li> <span class="balance">残高 : 1000</span> <button class="login-btn button is-info" @click="signOut">ログアウト</button> </ul> ... methods: { signOut() { this.$store.dispatch('signOut') } },
試したこと
自分なりの解釈はログアウトしたいユーザーが読み取られていないからdisplaiName: Null になってしまっているのかなと思い、
firebase.auth().onAuthStateChanged((username) => { やfirebase.auth().currentUser
のコードでログインしているユーザーを取得して、displayNameを指定してあげれば実装できると思い、行ってみましたが、同じエラーが発生してしまいました、どのようにすればエラーが表示されなくなるのか改善すべき点などありましたら教えていただきたいです。
補足
vueに直書きせずにactions経由で実装させようと思っています。
まだ回答がついていません
会員登録して回答してみよう