VueFire

外观

选项 API 实时数据 ​

提示

此页面假设您已阅读 实时数据 页面，并且只涵盖选项 API 和组合 API 之间的语法差异。

使用 VueFire 处理实时数据有两种方法

  • 使用 firebase/firestore 选项进行声明式绑定
  • 使用注入的方法 $databaseBind/$firestoreBind 进行编程式绑定

一旦您绑定，VueFire 将保持本地版本与远程数据库同步。但是，这种同步仅是单向的。不要修改本地变量（例如，执行 this.user.name = 'John'），因为 (a) 它不会更改远程数据库，并且 (b) 它可能随时被 VueFire 覆盖。要将更改写入数据库，请使用 Firebase JS SDK。换句话说，将本地变量视为只读。

设置 ​

为了使用 firebase/firestore 选项和本页中描述的其他功能，您需要将模块添加到 vuefire 插件中

ts
import { VueFireFirestoreOptionsAPI, VueFireDatabaseOptionsAPI } from 'vuefire'

app.use(VueFire, {
  modules: [
    // to use the `firestore` option
    VueFireFirestoreOptionsAPI(),
    // to use the `firebase` option
    VueFireDatabaseOptionsAPI(),
  ]
})

您可以将全局选项传递给模块，但请注意，这些选项仅影响选项 API 的使用。它们不会影响组合 API 调用，例如 useDocument() 和 useDatabaseObject()。 查看全局选项，了解如何覆盖这些选项。

ts
app.use(VueFire, {
  modules: [
    VueFireFirestoreOptionsAPI({
      // this would be the same behavior as VueFire v2
      reset: true,
      wait: false,
    }),
    VueFireDatabaseOptionsAPI({
      // this would be the same behavior as VueFire v2
      reset: true,
      wait: false,
    }),
  ]
})

声明式绑定 ​

在 firebase/firestore 选项中提供的任何数据库引用将在创建时（在 Vue 的 beforeMount 钩子之后）绑定到组件上的指定键。在以下示例中，我们将集合中的文档绑定到我们的 documents 属性。在 firebase/firestore 选项（documents）中提供的键必须在组件的 data 中初始化

js
// RecentDocuments.vue
import { collection } from 'firebase/firestore'

export default {
  data() {
    return {
      documents: [],
    }
  },

  firestore: {
    documents: collection(db, 'documents'),
  },
}

警告

您必须在 data 中声明属性及其初始值。对于 Firebase 数据库，使用数组作为初始值将绑定引用作为数组，否则将绑定为对象。对于 Firestore，集合和查询绑定为数组，而文档绑定为对象。

编程式绑定 ​

如果您需要在应用程序运行时更改绑定的引用，例如显示不同的用户配置文件或不同的产品详情页面，则声明式绑定是不够的。这可以通过 $databaseBind/$firestoreBind 方法实现

js
// UserProfile.vue
const users = collection(db, 'users')

export default {
  props: ['id'],
  data() {
    return {
      user: null,
    }
  },

  watch: {
    id: {
      // call it upon creation too
      immediate: true,
      handler(id) {
        this.$firestoreBind('user', doc(users, id))
      },
    },
  },
}

使用上述方法，user 将始终绑定到由 prop id 定义的用户

提示

无需调用 $databaseUnbind/$firestoreUnbind，因为 $databaseBind/$firestoreBind 将自动取消绑定在提供的键上的任何现有绑定。在组件移除时，所有绑定也将被移除，因此无需在 unmounted 钩子中使用 $databaseUnbind/$firestoreUnbind。

如果您需要在执行某些操作之前等待绑定就绪，您可以等待返回的 Promise

js
this.$firestoreBind('user', doc(users, this.id)).then(user => {
  // user will point to the same property declared in data:
  // this.user === user
})

this.$firestoreBind('documents', query(documents, where('creator', '==', this.id))).then(documents => {
  // documents will point to the same property declared in data:
  // this.documents === documents
})

取消绑定 / 取消订阅更改 ​

虽然 VueFire 会在需要时自动取消绑定组件中绑定的任何引用，但您可能仍然希望自己执行此操作，以停止显示文档或集合的更新，或者因为用户已注销并且不再拥有权限。

js
// unsubscribe from Database updates
this.$firestoreUnbind('user')
this.$firestoreUnbind('documents')

默认情况下，VueFire 不会重置绑定的属性，但您可以通过向 firestoreUnbind/rtdbUnbind 提供第二个参数来自定义此行为

js
// default behavior
this.$firestoreUnbind('user')
this.$firestoreUnbind('user', false)
// this.user === { name: 'Eduardo' }

// using a boolean value for reset to keep current value
this.$firestoreUnbind('user', true)
// this.user === null

// using the function syntax to customize the value
this.$firestoreUnbind('user', () => ({ name: 'unregistered' })
// this.user === { name: 'unregistered' }

// for collections, they are reset to an empty array by default instead of `null`
this.$firestoreUnbind('documents', true)
// this.documents === []

也可以在绑定时使用 reset 选项来自定义此行为

js
// using a boolean value for reset
await this.$firestoreBind('user', userRef)
this.$firestoreBind('user', otherUserRef, { reset: true })
// before the user has been fetched for the first time, you will have
// this.user === null

您也可以在添加选项 API 模块时全局更改此行为

ts
VueFireFirestoreOptionsAPI({
  reset: true,
})