升级到 VueFire v3

VueFire v2 和 VueFire v3 有很多共同点，但它们之间发生了 Vue.js 生态系统的一项重大改进：Composition API。除此之外，Firebase SDK 本身也发生了很大变化。VueFire v3 基于 Composition API 构建，为使用 Vue.js 与 Firebase 交互提供了一种惯用的方式，适用于 **Vue 2 和 Vue 3**。这意味着，如果您仍在使用 Vue 2，只要您 **使用 Vue 2.7**，就可以升级到 VueFire v3 并使用 Composition API 或 Options API。它还依赖于新的 Firebase SDK v9，该 SDK 提供了一个模块化 API，可以极大地改善应用程序的最终大小。

因此，以下是对 VueFire v3 进行升级的要求

使用 Vue 2.7 或更高版本
使用 Firebase SDK v9 或更高版本

一般建议

VueFire 3 引入了一个 Composition API，它比 Options API 更灵活、更强大。但是，它尽可能地将现有的 Options API 保持与 v2 中的现有版本一致。在内部，它作为 Composition API 的包装器实现。

以 *rtdb* 开头的术语现在都以 *database* 为前缀，以匹配 Firebase SDK。例如，rtdbBindAsArray 现在是 databaseBindAsArray。以 *rtdb* 开头的术语仍然可用，但被标记为已弃用。

弃用

firestorePlugin 和 rtdbPlugin 现在已弃用，取而代之的是 *模块*。它们仍然可用，但将在下一个主要版本中删除。您应该改用 VueFire、VueFireFirestoreOptionsAPI 和 VueFireDatabaseOptionsAPI

 const app = createApp({})

 // for firestore
app.use(firestorePlugin, options) 
app.use(VueFire, { modules: [VueFireFirestoreOptionsAPI(options)] }) 

 // for database
app.use(rtdbPlugin, options) 
app.use(VueFire, { modules: [VueFireDatabaseOptionsAPI(options)] })

重大更改

删除 Firestore 的 `serialize` 选项

Firestore 支持 serialize 选项的本地等效项：Firestore 数据转换器。您可以使用它将数据转换为类实例。这是使用 Firestore 与 VueFire 的推荐方法，**并使其类型安全**。

VueFire 支持一个 **全局 converter 选项**，它等效于之前的全局 serialize 选项。请注意，与它的前身 serialize 一样，VueFire 使用一个默认转换器，该转换器会将 id 属性添加到您的数据中，您可以导入它来使用它

import { firestorePlugin } from 'vuefire'
import { createApp } from 'vue'

const app = createApp(App)
app.use(firestorePlugin, {
  converter: {
    toFirestore() {
      // ...
    },
    fromFirestore() {
      // ...
    }
  }
})

如果您在调用 $bind() 时在本地使用它，您现在应该在数据源上使用 .withConverter() 方法

const usersRef = collection(db, 'users').withConverter({
  // you can directly use the default converter
  toFirestore: firestoreDefaultConverter.toFirestore,
  fromFirestore: (snapshot, options) => {
    // or reuse it and extend it
    const data = firestoreDefaultConverter.fromFirestore(snapshot, options)
    return new User(data)
  }
})

请注意，您甚至可以 **重复使用** 默认转换器来扩展它

import { firestoreDefaultConverter } from 'vuefire'

const usersRef = collection(db, 'users').withConverter({
  // you can directly use the default converter
  toFirestore: firestoreDefaultConverter.toFirestore,
  fromFirestore: (snapshot, options) => {
    // or reuse it and extend it
    const data = firestoreDefaultConverter.fromFirestore(snapshot, options)
    return new User(data)
  }
})

将 `$bind` 重命名为 `$firestoreBind`

$bind 方法现在称为 $firestoreBind，以避免与其他库发生冲突。同样，$unbind 现在称为 $firestoreUnbind。

将 `$rtdbBind` 重命名为 `$databaseBind`

$rtdbBind 方法现在称为 $databaseBind，以具有与 Firebase SDK 一致的命名。同样，$rtdbUnbind 现在称为 $databaseUnbind。

请注意，出于兼容性原因，$rtdbBind 和 $rtdbUnbind 方法仍然可用，但被标记为已弃用。

对 `reset` 和 `wait` 的默认更改

reset 的默认值为 false，wait 的默认值为 true。这应该被视为一项增强功能，因为它使在从 Firebase 首次获取数据时不会影响视图的情况下，更容易加载新的 *文档* 或 *集合*。如果您希望使用旧的行为，您可以全局强制执行这些设置

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

Vuexfire

提示

如果您使用的是 Pinia，请确保查看 Pinia 指南。

从 VueFire 3 开始，Vuexfire 没有完全的替代品。这是因为 Pinia 已经成为 Vue 的新事实上的存储解决方案。

查找有关如何将 VueFire 与 Vuex 一起使用的指南此处。

升级到 VueFire v3 ​

一般建议 ​

弃用 ​

重大更改 ​

删除 Firestore 的 serialize 选项 ​

将 $bind 重命名为 $firestoreBind ​

将 $rtdbBind 重命名为 $databaseBind ​

对 reset 和 wait 的默认更改 ​

Vuexfire ​