はじめに

こんにちは！
今回は前回の記事の続き、ログアウトの実装についてアウトプットしていきます！

対象

・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方
・前回の記事までの内容がお済みの方

使用環境

使用技術	バージョン
nuxt.js	2.15.7
firebase	9.6.1
firebase-tools	9.23.3
@nuxtjs/tailwindcss	4.2.0

使用ファイル,概要

ファイル名	概要
pages/top	ログイン後表示TOPページ
components/MainHeader.vue	ログイン後表示ヘッダー内容部分
layouts/oftenuse.vue	ログイン後表示ヘッダー＆フッター
plugins/firerbase.js	firebase導入
store/index.js	ログインデータの管理&保持

store/index.jsでのログアウト機能

store/index.js

export const state = () => ({
    user: {
        email: "",
        password: "",
        login: false
    }
});

export const mutations = {
    signOut(state) {
        state.user.email = "";
        state.user.password = "";
        state.user.login = false;
    }
};

ログアウト機能の実装

components/MainHeader.vue

<template>
  <div
    class="header w-full bg-green-200 px-8 py-4 flex justify-between font-serif"
  >
    <h1>
      <a class="text-4xl hover:opacity-50 duration-1000">NewSelf</a>
    </h1>
    <ul class="flex justify-between items-center opacity-100 text-xl">
      <li>
        <nuxt-link to="/record">
          <a class="pr-8 hover:opacity-50 duration-1000">メモ</a>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/recordlist">
          <a class="pr-8 hover:opacity-50 duration-1000">メモ一覧</a>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/diagnose">
          <a class="pr-8 hover:opacity-50 duration-1000">診断</a>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/inquiry">
          <a class="pr-8 hover:opacity-50 duration-1000">お問い合わせ</a>
        </nuxt-link>
      </li>
      <li>
        <button @click="signOut" class="pr-5 hover:opacity-50 duration-1000">
          ログアウト
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    signOut() {
      this.$auth
        .signOut()
        .then(() => {
          alert("ログアウトに成功しました");
          this.$store.commit("signOut");
          this.$router.push("/");
        })
        .catch((error) => {
          console.log(error);
          alert("ログアウトに失敗しました");
        });
    },
  },
};
</script>

・ログアウト機能の実装を行うときはsignOutメソッドを使用します。（強制）
・ログイン成功後に表示されるページ（MainHeader.vue）のログアウトボタンをクリックすると'signOut'処理は発火。
・store/index.jsにあるmutations👉signOUtの処理が働く。
email　＝　空の状態
password　＝　空の状態
login　＝　ログインしていない状態
になる。
・今回はstore/index.jsのmutationsの処理を引っ張ってきているので、MainHeader.vueでのscriptでの処理はthis.$store.commit("signOut");と表記する。
（mutations＝commit、actions＝dispatch）