Vue修改Firestore数据后视图无变化，需刷新页面才生效问题求助

问题根因 #

toggleReminder 方法存在逻辑错误：你从Firestore获取的doc.data()是请求发起时的静态数据快照，不会随后续的update操作自动更新。你先对原提醒状态取反更新到数据库，之后更新本地tasks数组时，又对同一个原始静态值做了一次取反，相当于本地状态又变回了修改前的值，因此视图无响应，只有刷新页面重新拉取数据库数据后才会显示变更。

修复代码 #

替换你的toggleReminder方法为以下内容即可：

toggleReminder(id) {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      firebase.firestore().collection(user.uid).get().then((documentSnapshot) =>{
        documentSnapshot.forEach((doc)=> {
          if (doc.data().id === id) {
            // 先把变更后的值存为变量，避免两次取反抵消
            const newReminderVal = !doc.data().reminder
            doc.ref.update({reminder: newReminderVal })
            this.tasks = this.tasks.map((task) =>
              task.id === id ? { ...task, reminder: newReminderVal } : task
            )
          }
        })
      })
    }
  })
}

可选优化建议 #

你当前修改、删除任务时都会拉取整个用户集合遍历查找对应文档，性能较差，可直接通过文档id查询操作，简化逻辑同时提升效率：

// 优化后的toggleReminder示例
toggleReminder(id) {
  firebase.auth().onAuthStateChanged(async (user) => {
    if (!user) return
    const docRef = firebase.firestore().collection(user.uid).doc(id)
    const doc = await docRef.get()
    const newReminderVal = !doc.data().reminder
    await docRef.update({ reminder: newReminderVal })
    this.tasks = this.tasks.map(task => task.id === id ? {...task, reminder: newReminderVal} : task)
  })
}

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