如何在Vue多页面中复用Firestore的db实例？

方法一：直接导出db实例 #

在main.ts里把初始化好的db直接暴露出去：

const firebaseConfig = {
  //....
}
// Initialize Firebase
const app = initializeApp(firebaseConfig)
export const db = getFirestore(app) // 加上export导出db
export const useTodos= createGlobalState(
  () => useFirestore(collection(db, 'todos')),
)

之后在需要的组件里直接导入使用：

import { db } from '@/main'
import { doc } from 'firebase/firestore'
import { useFirestore } from '@vueuse/firebase'

const someDocument = useFirestore(doc(db, 'collection', myKey, 'sub-collections', myKeyTwo))

方法二：封装通用的文档查询钩子 #

要是不想在每个组件里都导入db，可以封装一个全局钩子复用已有的db实例，在main.ts里新增：

const db = getFirestore(app)
export const useTodos= createGlobalState(
  () => useFirestore(collection(db, 'todos')),
)
// 封装全局的文档查询钩子
export const useFirestoreDoc = createGlobalState((...pathSegments: string[]) => {
  return useFirestore(doc(db, ...pathSegments))
})

组件里直接调用这个钩子，不用关心db的来源：

import { useFirestoreDoc } from '@/main'

const someDocument = useFirestoreDoc('collection', myKey, 'sub-collections', myKeyTwo)

方法三：用Vue的Provide/Inject传递db #

如果不想暴露全局变量，用Vue的Provide/Inject机制传递db：
在main.ts里给app提供db实例：

const app = createApp(App)
const db = getFirestore(initializeApp(firebaseConfig))
app.provide('firestoreDb', db)
// 其他初始化逻辑...
app.mount('#app')

组件里通过inject获取db：

import { inject } from 'vue'
import { doc } from 'firebase/firestore'
import { useFirestore } from '@vueuse/firebase'

const db = inject('firestoreDb')
const someDocument = useFirestore(doc(db, 'collection', myKey, 'sub-collections', myKeyTwo))

这三种方法各有适用场景：直接导出db最适合小型项目，简单直接；封装钩子更贴合VueUse的使用习惯，方便统一维护；Provide/Inject则适合对全局变量有顾虑的场景，按需选择即可。

内容的提问来源于stack exchange，提问作者J4N