Nuxt.jsでFirebase Realtime Databaseを使う

コード Vue.js/Nuxt.js

備忘録です。

初期設定

firebase authの設定と同じです。

Nuxt.jsでFirebase Authを使ってみる
個人プロジェクトでNuxt.jsでFirebase Authを使うことになったので備忘録として書きます。初期設定ライブラリのインストールnpm install --save firebaseFirebaseの初期化plugins/...

ライブラリのインストール

npm install --save firebase

Firebaseの初期化
plugins/firebase.js

import firebase from "firebase";
if (firebase.apps.length === 0) {
firebase.initializeApp({
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
});
}
export default firebase;

書き込み

セキュリティルールで書き込み・読み込みにユーザー限定の設定をしている場合は認証が必要です。
単純にデータを書き込む場合

firebase.database().ref(書き込み先).set({
    name:"Taro",
    age:16
});

pushでkeyを生成してから書き込む場合

let db = firebase.database().ref(書き込み先).push()
db.set({
    title:"hello world"
    body:"こんにちは"
})
let key = db.key //生成されたキーを取得できます。

読み込み

let db = firebase.database().ref(読み込み先)
db.get().then(ans=>{
    if (ans.exists()){//データが存在するか確認
        console.log(ans.val()) //データを出力
    }else{
        console.log("データが存在しません")
    }
}).catch(error=>{
    console.log(error)
})

更新

let db = firebase.database().ref(更新先).update({
    name:"hanako"
})

削除

削除する場合はsetでnullを設定するかremove関数呼び出すことで削除できます。

セキュリティルールの設定に引っかかった場合はパーミッションエラーが返されます。

参考ページ

ウェブでのデータの読み取りと書き込み  |  Firebase Realtime Database
ウェブ上でデータリストを操作する  |  Firebase Realtime Database

コメント

タイトルとURLをコピーしました