简介

Vuefire 是一个小型且实用的解决方案，用于在 Firebase RTDB 或 Firebase Cloud Firestore 与您的 Vue 应用程序之间创建实时绑定。使您的本地数据始终与远程数据库保持同步变得轻而易举。

为什么选择 VueFire

虽然 Firebase SDK 提供了一个 API 来使您的本地数据与远程数据库中发生的任何更改保持同步，但它比您想象的要繁琐，并且涉及许多边缘情况。以下是您需要编写的代码，以使您的本地状态与 Firebase 保持同步，**不使用 Vuefire**。让我们以将集合绑定为数组为例，包括 RTDB 和 Cloud Firestore

// get Firestore database instance
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'
import { createApp } from 'vue'

const firebase = initializeApp({ projectId: 'MY PROJECT ID' })
const db = getFirestore(firebase)

createApp({
  // setup the reactive todos property
  data: () => ({ todos: [] }),

  created() {
    // unsubscribe can be called to stop listening for changes
    const unsubscribe = db.collection('todos').onSnapshot(ref => {
      ref.docChanges().forEach(change => {
        const { newIndex, oldIndex, doc, type } = change
        if (type === 'added') {
          this.todos.splice(newIndex, 0, doc.data())
          // if we want to handle references we would do it here
        } else if (type === 'modified') {
          // remove the old one first
          this.todos.splice(oldIndex, 1)
          // if we want to handle references we would have to unsubscribe
          // from old references' listeners and subscribe to the new ones
          this.todos.splice(newIndex, 0, doc.data())
        } else if (type === 'removed') {
          this.todos.splice(oldIndex, 1)
          // if we want to handle references we need to unsubscribe
          // from old references
        }
      })
    }, onErrorHandler)
  },
})

警告

在 RTDB 示例中，我们省略了取消订阅部分，因为它需要保存每个创建的监听器的返回值，以便稍后使用它们中的每一个调用 this.todosRef.off。
在 Firestore 示例中，上面的代码没有考虑 Firestore 引用，这**大大**增加了绑定的复杂性，并且由 Vuefire 透明地处理

现在让我们看看使用 vuefire 的等效代码

import { initializeApp } from 'firebase/app'
import { getFirestore, collection } from 'firebase/firestore'
import { createApp } from 'vue'
import { useCollection } from 'vuefire'

const firebase = initializeApp({ projectId: 'MY PROJECT ID' })
const db = getFirestore(firebase)

createApp({
  setup() {
    const todosRef = collection(db, 'todos')
    const todos = useCollection(todosRef)

    return { todos }
  }
})

就是这样！您可以在任何地方使用 todos，它将始终与您的远程数据库保持同步。让我们深入了解 Vuefire 添加的所有功能：入门

简介 ​

为什么选择 VueFire ​

简介

为什么选择 VueFire