VueFire

外观

Firebase 服务 ​

VueFire 提供了一组可组合函数来访问一些不同的 Firebase 服务。这些都以以 use 开头的可组合函数的形式公开。

vue
<script setup>
import {
  useFirebaseApp,
  useAuth,
  useDatabase,
  useFirestore,
  useFirebaseStorage,
  // etc
} from 'vuefire'

const firebaseApp = useFirebaseApp()
const auth = useAuth()
const database = useDatabase()
const firestore = useFirestore()
const storage = useFirebaseStorage()
</script>

作为 所有可组合函数，这些必须在 可注入上下文 中调用，例如组件的 setup、Pinia 商店或路由导航守卫。但是，只要您传递 Firebase 应用名称作为参数，您就可以在应用程序中的任何位置调用这些特定的 Firebase 服务可组合函数。

提示

仅当在 setup 之外使用可组合函数且满足以下条件之一时，才需要 Firebase 名称参数

  • 您正在进行 SSR
  • 您有多个 Firebase 应用

在所有其他情况下省略名称，它只是不需要。

其他 Firebase 服务 ​

对于 VueFire 未涵盖的任何其他服务，您应该通过将 firebase 应用作为第一个参数直接使用 Firebase SDK

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

const firebaseApp = useFirebaseApp()
const messaging = getMessaging(firebaseApp)
</script>

如果您发现自己经常使用它，可以为它创建一个可组合函数

ts
import { getMessaging } from 'firebase/messaging'
import { useFirebaseApp } from 'vuefire'

export function useFirebaseMessaging() {
  return getMessaging(useFirebaseApp())
}
vue
<script setup>
import { useFirebaseMessaging } from '~/composables/firebase-messaging'

const messaging = useFirebaseMessaging()
</script>

对于需要初始化的服务，您应该在 Firebase 应用初始化的同时进行初始化

ts
import { initializeApp } from 'firebase/app'
import { initializeAnalytics } from 'firebase/analytics'

export const firebaseApp = initializeApp({
  // config
})
initializeAnalytics(firebaseApp)

Nuxt ​

在 Nuxt 的上下文中，您可以在 plugins/ 文件夹中创建一个插件，它将被 Nuxt 自动拾取

ts
import {
  type Analytics,
  initializeAnalytics,
  isSupported,
} from 'firebase/analytics'

export default defineNuxtPlugin(async () => {
  const firebaseApp = useFirebaseApp()

  console.log('Loading analytics')

  let analytics: Analytics | null = null
  if (await isSupported()) {
    analytics = initializeAnalytics(firebaseApp)
    console.log('Loaded analytics')
  } else {
    console.log('Analytics not supported')
  }

  return {
    provide: {
      analytics,
    },
  }
})

.client 后缀对于仅在客户端运行的服务（如分析）很重要。有关更多信息，请参阅 Nuxt 文档。