Vue3+Pinia中使用useFirestore，如何监听绑定就绪状态？

架构老林

2026-8-1

问题

我正在把项目从Vue2+Vuex迁移到Vue3+Pinia，存储方案仍选用Firebase。为保持本地状态与远程Firebase数据库单向同步，我打算按照文档使用useFirestore，并把逻辑封装在Pinia的action中：

async bindTodos () {
   this.todos = useFirestore(collection(db, 'todos'));
}

this.todos已在Pinia的state中定义。我想在Pinia状态里维护一个布尔值todosReady，当todos首次加载完成时将其设为true。之前用Vuex时bindFirestoreRef会返回Promise，现在我是不是应该用import {watch} from "vue"来监听useFirestore返回的Ref变化？想确认这个思路是否正确！

回答

你的思路是对的，用watch监听useFirestore返回的Ref是可行的方案，不过需要注意几个细节：

useFirestore返回的是响应式Ref，初始值通常为null或空数组，当Firestore首次拉取到数据后，该Ref的值会更新。
可以在bindTodos中监听这个Ref的变化，且仅在首次加载完成时设置todosReady，避免后续数据更新重复触发：

import { watch, onUnmounted } from 'vue'

async bindTodos () {
  const todosRef = useFirestore(collection(db, 'todos'))
  this.todos = todosRef

  // 监听首次加载完成，完成后取消监听
  const unwatch = watch(todosRef, (newVal) => {
    if (newVal !== null && !this.todosReady) {
      this.todosReady = true
      unwatch()
    }
  }, { immediate: true }) // 立即执行一次，处理初始值已加载完成的场景

  // 组件卸载时清理监听
  onUnmounted(() => unwatch())
}