将 Firebase 引用绑定到现有的 Vue Refs

有时，您可能希望重用现有的 ref()。这可能是因为您想将 Firebase 数据写入来自可组合的自定义 ref，或者因为 ref 来自现有的反应性源，例如 Vuex/Pinia 存储。这可以通过将 ref() 传递给可组合的 target 选项来实现

todos // given an existing Ref<Todo[]>
const { pending } = useCollection(todoListRef, { target: todos })

当传递目标 ref 时，可组合将不会为您创建一个新的 ref()，而是使用您传递的 ref。它也不会将 ref() 作为结果返回，而是返回一个包含一些有用属性的对象。您可以在 声明式订阅 部分中找到更多相关信息。

Pinia

如果您使用的是 Pinia，您可以在 设置存储 中直接使用 useCollection() 函数

import { defineStore } from 'pinia'

export const useTodoStore = defineStore('todos', () => {
  const todos = useCollection(todoListRef)

  return { todos }
})

请注意，您仍然需要遵循 Firebase API（例如 addDoc()、updateDoc() 等）来更新数据，并且您还需要 等待数据在服务器上加载。