【Vue.js】Firebase Authenticationを使用してユーザ名を表示させる改

前回の記事から以下の観点で修正した

• vuexのstoreでメソッド管理
• firebaseの環境設定を別ファイルに切り出す

ソースコード

vuexのstoreでメソッド管理

vueファイル側でactions呼び出す

<template>
  <div class="signup">
    <h1>新規登録画面</h1>
    <table>
      <tr>
        <td>ユーザ名</td>
        <td><input type="text" placeholder="userName" v-model="username"></td>
      </tr>
      <tr>
        <td>メールアドレス</td>
        <td><input type="text" placeholder="E-mail" v-model="email"></td>
      </tr>
      <tr>
        <td>パスワード</td>
        <td><input type="password" placeholder="Password" v-model="password"></td>
      </tr>
    </table>
    <button class="button" @click="signUp">新規登録</button>
      <router-link to="/signin">ログインはこちらから</router-link>
  </div>
</template>

<script>
/* eslint-disable */

export default {
  name: 'Signup',
  data () {
    return {
      username: '',
      email: '',
      password: ''
    }
  },
  methods: {
    signUp () {
      this.$store.dispatch('signUp', {
        username: this.username,
        email: this.email,
        password: this.password,
      })
    },
  }
}
</script>

action経由でmutatinosを実行し、stateの変更を行う
※非同期処理やstateの変更はaction経由での実装が望ましい
公式より

・アクションは、状態を変更するのではなく、ミューテーションをコミットします。
・アクションは任意の非同期処理を含むことができます。

store/index.js

/* eslint-disable */
"use strict"

import Vue from 'vue'
import Vuex from 'vuex'
import firebase from 'firebase'
import router from '@/router'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        username: '',
        email: '',
        password: ''
    },
    mutations: {
        AddToState: function (state, payload) {
            state.email = payload.email
            state.password = payload.password
            state.username = payload.username
        }
    },
    actions: {
        signUp: function (context, payload) {
            firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
                .then(() => {
                    firebase.auth().currentUser.updateProfile({
                    displayName: payload.username,
                    },)
                .then(() => {
                    context.commit('AddToState', payload)
                })
                .then(() => {
                    router.push('/')
                })
                })
                .catch(error => {
                    alert(error.message)
                })
        },
    },
});

export default store

firebaseの環境設定を別ファイルに切り出す

firebaseの環境設定を別ファイルに切り出す

firebase.config.js

/* eslint-disable */
const config = {
    apiKey: "AIzaSyDeNuzV_lTclsv8iYhfH-K_sV9cNYOHUs4",
    authDomain: "tipping-app-be890.firebaseapp.com",
    projectId: "tipping-app-be890",
    storageBucket: "tipping-app-be890.appspot.com",
    messagingSenderId: "523721486484",
    appId: "1:523721486484:web:0db73f6f5d192b894f8481",
    measurementId: "G-TF5NZJT4LR"
  };

export { config }

環境設定のオブジェクトをmain.jsでimportし、読み込む

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable */
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
import { config } from '@/utilities/firebase.config';

firebase.initializeApp(config);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

参考