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認証機能を実装してみた なんか中途半端なコード

vue and nuxt and firebase

【Nuxt.js】firebase導入編(RDB版)：データの追加 取得をしようhttps://note.com/aliz/n/nc61318a7c431 にあるpluginで①を付け加える必要あった

import firebase from "firebase/app"
import 'firebase/database' // ①
//もしくは上の二行のかわりに
// import firebase from "firebase" でもいいが。。。。
if (!firebase.apps.length) {
 firebase.initializeApp({
   apiKey: "AIzaSyDR25V6IjIMmOGRky-Gu7IFk-xk6hfzl-I",
    authDomain: "axios-ex.firebaseapp.com",
    databaseURL: "https://axios-ex.firebaseio.com",
    projectId: "axios-ex",
    storageBucket: "axios-ex.appspot.com",
    messagingSenderId: "835561925001",
    appId: "1:835561925001:web:046d92faf19f64a9011958",
    measurementId: "G-KLTB6NPMJE"
 
 })
}

export default firebase

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
index.vueは原文のままでOKだったが、データベースの反映がちょっと時間かかる　諦めないことだ
<template>
 <div class="page">
   <label>
     <span>
       お名前:
     </span>
     <input
       type="text"
       v-model="user.name"
     >
   </label>
   <label>
     <span>
       email:
     </span>
     <input
       type="text"
       v-model="user.email"
     >
   </label>
   <button
     type="button"
     @click="submit"
   >
     Submit
   </button>
 </div>
</template>

<script>
import firebase from '@/plugins/firebase'


export default {
 data () {
   return {
     user: {
       name: "",
       email: ""
     },
   }
 },
 methods: {
   submit () {
     let Ref = firebase.database().ref()
     Ref.push({ name: this.user.name, body: this.user.email })
     .then(response => {
       console.log(response, this.user)
     })
   },
 },
}
</script>
---------------------------------------------------------------------------
https://qiita.com/magaya0403/items/e292cd250184ea3fe7b0 これもすぐれもん
Vue.js + FirebaseでTodoアプリを作る　ただしVueCli３
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
https://qiita.com/ririli/items/d0d3a6ae78c1b6e827fc　
Authがまともに動いたfirestoreもばっちり ただしnpm install --save firebase
のあとnpm installしないとだめなことあった　なお、Bulmaをインストしてないと
うまく表示されないのが恨み　store/index.jsのclearTodoは過剰コード