簡介

Firebase Realtime Database 是一個基於雲端的 NoSQL 資料庫，讓你可以輕鬆地存儲和同步用戶數據。在這篇文章中，我們將介紹如何在 Vue 3 應用中接收 Firebase Realtime Database 的資料改變。

安裝和配置

首先，確保你的專案已經安裝了 firebase 套件。

npm install firebase

然後，在你的專案中初始化 Firebase。

// Firebase 設定
import firebase from "firebase/app";
import "firebase/database";

// 初始化 Firebase
const firebaseConfig = {
  // 你的 Firebase 配置
};
firebase.initializeApp(firebaseConfig);

Vue 3 組件中接收資料改變

在 Vue 3 組件中，我們可以使用 on 方法來訂閱資料庫的改變。

// 在 Vue 3 組件中
import { ref, onMounted, onUnmounted } from "vue";
import firebase from "firebase/app";

export default {
  setup() {
    const someData = ref(null);

    onMounted(() => {
      const dbRef = firebase.database().ref("some/path");

      dbRef.on("value", (snapshot) => {
        someData.value = snapshot.val();
      });
    });

    onUnmounted(() => {
      const dbRef = firebase.database().ref("some/path");
      dbRef.off();
    });

    return {
      someData
    };
  }
};

總結

透過上面的步驟，你應該能夠在 Vue 3 中順利地接收 Firebase Realtime Database 的資料改變了。

最後修改日期: 2023 年 10 月 30 日

作者