VueFire

外观

入门 ​

在使用 VueFire 之前，请确保您已按照创建 Cloud Firestore 项目中的说明创建了 Firebase 帐户和项目。请记住，有两种不同的数据库：数据库和Firestore。如果您从未了解过它们，您应该首先阅读 Firebase 文档中的选择数据库。VueFire 支持在同一个项目中使用一个或两个数据库。在整个文档中，您经常会发现显示两者（数据库（) 和 Firestore () 示例的代码片段。点击它们以切换代码示例，它们通常非常相似。

安装 ​

为了开始使用，请确保安装最新版本的 vuefire 以及 firebase

sh
pnpm i vuefire firebase
sh
yarn add vuefire firebase
sh
npm i vuefire firebase

警告

VueFire 需要 Firebase JS SDK >= 9，但与 Vue 2 和 Vue 3 兼容。

使用 ​

VueFire 期望您尽可能使用 Firebase 中现有的 API。它不会公开任何配置来初始化您的应用程序或获取数据库/firestore 实例。您应该遵循官方 Firebase 文档来完成此操作。我们确实有一个Nuxt 模块，它使使用 VueFire 与 Nuxt 变得更加容易。

大多数情况下，您应该在一个文件中收集集合引用并导出它们，但为了使示例简短，我们将始终在需要时创建数据库引用，而不是将它们集中在一个地方。我们还将考虑我们可以访问一些全局变量（您通常从初始化 Firebase 应用程序的文件中导入它们）

js
import { initializeApp } from 'firebase/app'
import { getFirestore, collection } from 'firebase/firestore'
// ... other firebase imports

export const firebaseApp = initializeApp({
  // your application settings
})

// used for the firestore refs
const db = getFirestore(firebaseApp)

// here we can export reusable database references
export const todosRef = collection(db, 'todos')

请注意，导出 Database 和 Firestore 不是必需的，因为您始终可以使用 useFirebaseApp() 和其他可组合函数在组件中访问 Firebase 服务。

提示

请注意，在仅使用其中一个的示例中，我们将 database 和 firestore 称为 db。

设置 ​

首先，安装 VueFire Vue 插件。它将允许您将额外的模块（如AppCheck 或Auth）添加到您的应用程序中。

ts
import { createApp } from 'vue'
import { VueFire, VueFireAuth } from 'vuefire'
import App from './App.vue'
// the file we created above with `database`, `firestore` and other exports
import { firebaseApp } from './firebase'

const app = createApp(App)
app.use(VueFire, {
  // imported above but could also just be created here
  firebaseApp,
  modules: [
    // we will see other modules later on
    VueFireAuth(),
  ],
})

app.mount('#app')

这将使您能够在组件中访问一些方便的可组合函数，如 useFirebaseApp()、useFirestore() 和 useDatabase()

vue
<script setup>
import { useFirestore } from 'vuefire'
const db = useFirestore()
</script>

<template>
  <div>...</div>
</template>

Vue 2 ​

VueFire 仅支持 Vue 2.7，并且它还要求您使用 vue-demi 中的 createApp() 来保持 Vue 2 和 Vue 3 中的 API 相同。以下是与上面相同的示例，但针对 Vue 2 简化了

ts
import { createApp } from 'vue-demi'
import { VueFire } from 'vuefire'
import App from './App.vue'
// the file we created above with `database`, `firestore` and other exports
import { firebaseApp } from './firebase'

const app = createApp(App)
app.use(VueFire, { firebaseApp })
app.mount('#app')

组合 API ​

VueFire 公开了几个可组合函数，用于从 Firebase 引用创建响应式变量。

集合/列表 ​

您可以使用 useCollection()/useDatabaseList() 可组合函数检索响应式集合（Firestore）或列表（实时数据库）

vue
<script setup>
import { useCollection } from 'vuefire'
import { collection } from 'firebase/firestore'

const todos = useCollection(collection(db, 'todos'))
</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <span>{{ todo.text }}</span>
    </li>
  </ul>
</template>

在这两种情况下，todos 将是一个 ref() 数组。请注意，这是一个只读数组，但当数据在任何地方发生变化时，它将自动更新。

如果您想更改数据，您应该使用 Firebase API（例如 addDoc()、updateDoc()、push() 等）来更新数据

文档/对象 ​

类似地，您可以使用 useDocument()/useDatabaseObject() 可组合函数检索响应式文档（Firestore）或对象（实时数据库）

vue
<script setup>
import { useDocument } from 'vuefire'
import { doc } from 'firebase/firestore'

const settings = useDocument(doc(db, 'settings', 'some_id'))
</script>

在这两种情况下，settings 都会变成一个响应式对象。请注意，这是一个只读对象，但当数据在任何地方发生变化时，它将自动更新。

如果您想更改数据，您应该使用 Firebase API（例如 setDoc()、updateDoc()、set() 等）来更新数据

选项 API ​

VueFire 也可以与选项 API 一起使用，虽然灵活性较低，但它仍然是使用 VueFire 的有效方法。首先，您需要安装选项插件

  • 添加 VueFireFirestoreOptionsAPI 模块以使用 Firestore
  • 添加 VueFireDatabaseOptionsAPI 模块以使用 Firebase 数据库
js
import { createApp } from 'vue'
import { VueFire, VueFireFirestoreOptionsAPI } from 'vuefire'

const app = createApp(App)
app.use(VueFire, {
  // ...
  modules: [
    // Add any modules you want to use here
    VueFireFirestoreOptionsAPI(),
  ],
})

我应该使用哪个 API？ ​

组合 API 是使用 VueFire 的推荐方法。目前，它的 API 更加稳定，并且更容易与 TypeScript 一起使用。但是，选项 API 仍然是使用 VueFire 的有效方法。主要区别在于选项 API 更加冗长，并且要求您安装插件，并且比可组合函数略重。