Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオン

https://qiita.com/ririli/items/d0d3a6ae78c1b6e827fc

index.js::

import firebase from '~/plugins/firebase'
const db = firebase.firestore();

const todoRef = db.collection('todos')

export const state = () => ({
 userUid: '',
 userName: '',
 todos: []
})

export const mutations = {
 setUserUid(state,userUid) {
   state.userUid = userUid
 },
 setUserName(state,userName) {
   state.userName = userName
 },
 addTodo(state, todo) {
   state.todos.push(todo)
 },
 clearTodo(state) {
  state.todo = []
 }
}

export const actions = {
 login({ commit }) {
    console.log('login action')
    const provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then(function(result) {
      const user = result.user;

     console.log('success : ' + user.uid + ' : ' + user.displayName)
     commit('setUserUid', user.uid)
     commit('setUserName', user.displayName)
    }).catch(function(error) {
      var errorCode = error.code;
      console.log('error : ' + errorCode)
    });
  },
   fetchTodos({ commit }) {
  todoRef
  .get()
   .then(res => {
     res.forEach((doc) => {
       console.log('success : ' + `${doc.id} => ${doc.data()}`);
       commit('addTodo', doc.data())
     })
   })
   .catch(error => {
     console.log('error : ' + error)
   })
 },
  addTodo({commit}, todo) {
   console.log(todo)
   todoRef
   .add({
     todo: todo.todo,
     limit: todo.limit,
   })
   .then(function(docRef) {
     console.log("Document written with ID: ", docRef.id);
     commit('addTodo', todo)
   })
   .catch(function(error) {
     console.error("Error adding document: ", error);
   });
 }
}

export const getters = {
 getUserUid(state) {
   return state.userUid
 },
 getUserName(state) {
   return state.userName
   },
  getTodos(state) {
   return state.todos
 }
}

index.vue::

<template>
  <div class="container">
      <p class="title is-1 is-spaced">user: {{ $store.getters.getUserName }}</p>
      <button class="button is-primary is-rounded" @click="login">
        ログイン
      </button>

    <table class="table is-narrow">
      <tbody>
         <tr>
           <th>todo</th>
           <th>limit</th>
         </tr>
       </tbody>
       <tbody>
         <tr v-for="todo in $store.getters.getTodos" :key="todo">
           <td>{{todo.todo}}</td>
          <td>{{todo.limit}}</td>
         </tr>
       </tbody>
     </table>
    <div class="field is-grouped">
     <p class="control is-expanded">
       <input v-model="newTodo" class="input" type="text" placeholder="todo">
     </p>
     <p class="control is-expanded">
       <input v-model="newLimit" class="input" type="text" placeholder="limit">
     </p>
     <p class="control">
       <a class="button is-primary" @click="addTodo">
         add
       </a>
     </p>
   </div>
  </div>
</template>
<script>
export default {
   data() {
  return {
    newTodo: '',
    newLimit: ''
   }
 },
  methods: {
    login() {
     console.log('login')
this.$store.dispatch('login')
} ,
   addTodo() {
     const todo = this.newTodo
    const limit = this.newLimit
 
     this.$store.dispatch('addTodo', {todo, limit})
     this.newTodo = ''
     this.newLimit = ''
    }
   ,
   created() {
    this.$store.dispatch('fetchTodos')
   }
  }
 }
</script>
<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
firebase.js::
import firebase from 'firebase'

if (!firebase.apps.length) {
  firebase.initializeApp(
    {
  snippets for axios-ex
    }
  )
}


export default firebase
---------------------------------------------------------------
https://note.com/aokha/n/ne3a3f604a1c0 
Firebase+Nuxt.jsでGoogle認証機能を実装してみた なんか中途半端なコード