質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

解決済

firebaseでのログアウト機能が実行できない

konnnitiha
konnnitiha

総合スコア1

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

2回答

0評価

0クリップ

499閲覧

投稿2021/12/29 10:00

編集2022/01/12 13:37

前提・実現したいこと

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経由で実装させようと思っています。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。