🔰【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。 その３

// 保持させるデータ
export const state = () => ({
  mailAddress: '',
  password: '',
  loginState: false,
})

// 同期処理
export const mutations = {

  // ログイン処理
  loginState(state, mailAddress, password) {
    state.mailAddress = mailAddress;
    state.password = password;
    state.loginState = true;
  },
  //ログアウト処理
  logoutState(state) {
    state.loginState = false;
  },
}

export const state = {
 runners: [
  {name: "A", time: 9.8},
  {name: "B", time: 10.1},
  {name: "C", time: 12},
  {name: "D", time: 5.2},
  {name: "E", time: 10},
 ]
},

export const getters = {
  getRuners: state => {
    return state.runners.filter(runner => runner.time <= 10)
  },

  fetchName: (state, getters) => {
    getters.getRunners.forEach(runner => console.log(runner.name))
  }
}

[
 {name: "A", time: 9.8},
 {name: "D", time: 5.2},
 {name: "E", time: 10},
]

<template>
  <v-app>

    <v-content>
      <v-container>
        //この<nuxt />にpageが表示されていく
        <nuxt />
      </v-container>
    </v-content>

  </v-app>
</template>

<template>
  <v-container>
    <h3 style="color: black; text-align: center">ログイン</h3>
    <!-- ここにメールアドレスとパスワードを入力してもらう。それぞれmailAddress/passwordという変数に格納される。 -->
    <v-text-field v-model="mailAddress" label="メールアドレス" light></v-text-field>
    <v-text-field v-model="password" label="パスワード" light></v-text-field>
    <!-- エラー時（validがtrue時）にvalidErrorを表示させる -->
    <p class="errorMessage" style="color: red" v-if="valid">{{validError}}</p>
    <v-btn @click="login()"> ログイン </v-btn>
  </v-container>
</template>

<script>
import firebase from "~/plugins/firebase.js";

export default{
  data() {
    return {
        mailAddress: '', //打ち込んでもらうメールアドレス
        password: '', //打ち込んでもらうパスワード
        valid: false,　//打ち込んだメールアドレス・パスワードが正しくない時はtrue、正しい時はfasle
        validError: "UserIDまたはPasswordが間違っています", //validがtrueの時に表示するメッセージ
    }
  },
  methods: {
    login: function() {
      //ここはただのfirebaseの公式の関数なので、あまり気にしなくて大丈夫です。
      firebase.auth().signInWithEmailAndPassword(this.mailAddress, this.password)
       .then(user => {
        //storeのmutationsの`loginState`を呼び出す
        this.$store.commit('loginState', this.mailAddress, this.password);
        // ログインしたら飛ぶページを指定
        this.$router.push("top");
        //エラーがおきたら、以下の処理
      }).catch((error) => {
        this.valid = true;
      });
    },
  },
}

</script>

<template>
  <v-content>
    <h3 style="color: black">topです。</h3>
  </v-content>
</template>

<script>
</script>