2020年5月13日水曜日

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アプリを作る ただしVueCli3
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
https://qiita.com/ririli/items/d0d3a6ae78c1b6e827fc 
Authがまともに動いたfirestoreもばっちり ただしnpm install --save firebase
のあとnpm installしないとだめなことあった なお、Bulmaをインストしてないと
うまく表示されないのが恨み store/index.jsのclearTodoは過剰コード

0 件のコメント:

コメントを投稿