VueFire：一个一流的 Vue 和 Firebase 体验，包括对 Nuxt 的支持，现在已经稳定了

VueFire，一个一流的 Vue 和 Firebase 体验 — 包括对 Nuxt 的支持，现在已经稳定了。

Vue 和 Firebase 现在比以往任何时候都更好了。

构建更好的VueFire

去年，我们宣布与 Eduardo San Martin Morote 合作，构建一个成熟的 Vue 和 Firebase 体验。自那时起，我们一直在努力构建我们的特性，如 Nuxt 支持，并使库通过 alpha 和 beta 阶段。我们很高兴地说，库现在是稳定的。

今天，我们很高兴地宣布VueFire现在已经稳定，可以使用了。

在本博客中，我们将介绍 VueFire 帮助简化 Vue 和 Firebase 开发的所有方式，但请务必查看文档以获取完整的详细信息。

VueFire 有什么新功能？

惯用的实时绑定

一行实时数据绑定

VueFire 为您提供了方便的可组合项，以便为 Firestore 和实时数据库创建实时数据绑定。

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

// This is a composable. It only needs a ref to manage 
// the subscription.
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 数组。

在幕后，VueFire 依靠 Firebase SDK 使用 onSnapshot() 和 onValue() 等方法完成繁重的工作，剥离所有样板代码，为 Vue 开发人员提供量身定制的开发人员体验。

除了 useCollection()（适用于 Firestore）外，您还可以使用 useDocument() 找到与文档（document）对应的功能，使用 useDatabaseList() 和 useDatabaseObject() 找到与列表和对象（适用于实时数据库）对应的功能：

import { useDatabaseList, useDatabaseObject, useDatabase } from 'vuefire'
import { ref as dbRef } from 'firebase/database'

const db = useDatabase()
const contacts = useDatabaseList(dbRef(db, 'contacts'))
const someContact = useDatabaseObject(dbRef(db, 'contacts', '24'))

VueFire 允许您传递对文档和集合（collections）的动态引用，并自动解除先前引用的绑定并绑定新引用。例如，我们可以依靠路由参数来绑定到特定文档：

<script setup lang="ts">
import { useRoute } from 'vue'
import { useDocument } from 'vuefire'
import { doc } from 'firebase/firestore'

const route = useRoute()
// note the () => doc() to pass a dynamic reference
const contact = useDocument(() => doc(db, 'contacts', route.params.id))
</script>

<template>
  <Contact :contact="contact" />
</template>

当从 /contacts/1 导航到 /contacts/2 时，前一个文档将被解除绑定，而新的文档将被绑定，所有这一切只需将一个函数传递给一个文档，而不仅仅是文档。请注意，这也适用于 computed() 属性和 ref() 变量。

身份验证变得更容易

VueFire 采用 Firebase 的底层身份验证功能，并将其封装到 Vue 组件中，使其可以在您的 Vue 应用程序中轻松、习以为常地使用。

<script setup>
import { useCurrentUser } from 'vuefire'

const user = useCurrentUser()
</script>

<template>
  <p v-if="user">Hello {{ user.providerData.displayName }}</p>
</template>

user 变量是响应式的，因此您可以将其与其他 Composition API 函数（例如 computed() 或 watch() ）一起使用。

<script setup>
import { useCurrentUser } from 'vuefire'
import { useRouter } from 'vue-router'

const user = useCurrentUser()

watch(user, user => {
  if (user == null) {
    router.push('/login')
  }
})
</script>

<template>
  <!-- ... -->
</template>

如果没有用户经过身份验证，则 user 变量将为 null ，因此您可以看到它只需几行即可重定向到登录页面，如上所示。

忠实于 Firebase SDK

VueFire 会尽量不妨碍您，并让您像平常一样使用 Firebase SDK。它提供了在 Vue 上下文中有用的 API，但您可以而且仍然应该使用 Firebase SDK 来完成许多事情，例如事务、批量写入、转换器等。

尽管有特定的 Vue 集成，您仍然可以通过手动调用 doc() 、 collection() 以及 Firebase SDK 中的其他方法来访问 Firebase 引用。我们相信这有助于我们更接近 Firebase SDK，并使同时使用两者变得更加直观。例如，不能使用VueFire写入绑定数据，必须使用Firebase SDK进行更新操作：

<script setup lang="ts">
import { useFirestore } from 'vuefire'
import { doc, addDoc, serverTimestamp } from "firebase/firestore"; 

const db = useFirestore()

function addTodo(text: string) {
  // ✨ add a new todo
  await addDoc(collection(db, "todos"), {
    text,
    createdAt: serverTimestamp(),
    done: false
  });
}
</script>

VueFire 并未覆盖所有 Firebase 服务，也没有尝试覆盖所有 Firebase 服务。大多数时候不需要抽象，Firebase SDK 就足够了。例如，您可以直接将消息服务与 Firebase SDK 结合使用：

<script setup>
import { useFirebaseApp } from 'vuefire'
import { getMessaging, onMessage } from 'firebase/messaging'

const firebaseApp = useFirebaseApp()
const messaging = getMessaging(firebaseApp)
onMessage(messaging, payload => {
   console.log('Message received. ', payload)
})
</script>

不需要 Vue 集成或 VueFire 特定代码。

Nuxt支持，服务器支持变得简单

VueFire 最令人兴奋的功能之一是它的 Nuxt 模块。它不仅负责 Firebase 初始化，还处理将 Firebase 与 Nuxt 集成的最复杂部分之一：服务器端渲染 (SSR)。为了使用 VueFire 的 Nuxt 模块，请使用您最喜欢的包管理器安装它：

npm install nuxt-vuefire

然后你可以在 Nuxt 配置文件中配置它：

export default defineNuxtConfig({
  modules: [
    // ... other modules
    'nuxt-vuefire',
  ],

  vuefire: {
    // Firebase App configuration
    config: {
      apiKey: '...',
      authDomain: '...',
      projectId: '...',
      appId: '...',
    },
  },
})

最重要的是，VueFire 的 Nuxt 模块还使得使用 AppCheck、身份验证和模拟器等功能变得非常容易。

App Check 支持，轻松、安全的后端访问

Firebase App Check 是一个额外的安全层，通过证明传入流量来自您的应用程序并阻止没有有效凭据的流量，帮助保护对您的服务的访问。它有助于保护您的后端免遭滥用，例如计费欺诈、网络钓鱼、应用程序假冒和数据中毒。

启用 AppCheck 就像将 appCheck 属性添加到 vuefire 配置对象一样简单：

export default defineNuxtConfig({
  // ...
  vuefire: {
    // Enables AppCheck
    appCheck: {
      // Allows you to use a debug token in development
      debug: process.env.NODE_ENV !== 'production',
      provider: 'ReCaptchaEnterprise',
      key: '...',
    },
  },
})

通过使用 debug 选项，您可以在开发中使用调试令牌。无论是在开发期间还是在重要发布之前，这对于在没有模拟器的情况下进行本地测试非常有用。

服务器和客户端身份验证同步

通过客户端和服务器进行同步身份验证可能很难管理。每台机器都需要验证和维护相同的身份验证上下文。这可能需要设置 cookie、后台云函数或其他复杂的方法。

然而，使用 VueFire 的 Nuxt 模块设置身份验证也很容易：

export default defineNuxtConfig({
  // ...
  vuefire: {
    // Enables and initializes the auth module
    auth: {
      enabled: true,
    },
  },
})

默认情况下，这不会启用服务器端渲染需要验证用户的页面。在大多数情况下，这样做是没有问题的，因为你不需要对隐藏在身份验证后面的页面进行搜索引擎优化。这还能节省大量计算能力。

但是，可以通过让模块为经过身份验证的用户创建一个 cookie 并在每个请求上使用它来对它们进行身份验证来启用此功能。然后，呈现页面，就像用户已通过身份验证一样：

export default defineNuxtConfig({
  // ...
  vuefire: {
    // Enables and initializes the auth module
    auth: {
      enabled: true,
      sessionCookie: true,
    },
  },
})

设置完成后，您可以使用 useCurrentUser()，如上所示。它会自动导入，使其更易于使用。您还可以使用 getCurrentUser() 等待用户在中间件中登录：

export default defineNuxtRouteMiddleware(async to => {
  const user = await getCurrentUser()

  if (!user) {
    // redirect to the login page
    return navigateTo({
      path: '/login',
      query: {
        // keep the original path as a query parameter
        redirect: to.fullPath,
      },
    })
  }
})

然后在路由中定义页面元数据：

<script setup lang="ts">
definePageMeta({
  middleware: ['authenticated'],
});
</script>

模拟器设置变得简单

Firebase 模拟器套件是使用 Firebase 进行开发的推荐方式。这使您可以针对 Firebase 服务的本地实例进行开发，而不是处理需要网络连接或可能产生计费问题的云连接项目。

通常，要使用模拟器，您需要编写代码来告诉 Firebase SDK 连接到模拟器而不是云项目。然而，在 Nuxt 模块中，这一切都会自动发生。

默认情况下，如果您有一个带有 emulators 属性的 firebase.json 文件，VueFire 将在开发过程中自动启用模拟器。

一个全新的文档站点

VueFire 文档位于 https://vuefire.vuejs.org/。

这些文档在主存储库中是开源的。如果您想看到任何更改或添加，请告诉我们！