Vuejs & Firestore - 当 Firestore 中的数据发生变化时如何更新

Question

我已经阅读了大量教程和文档，但是当 Firestore 中的数据发生变化时，似乎无法在页面上更新（注意：不是 Firebase）

这是我目前工作正常的内容，除非数据库中的数据发生变化，除非我刷新，否则它不会反映在页面本身上。下面的代码在脚本标签内：

 import { recipeRef } from '../../firebase';
 export default {
 data() {
  return {
    recipes: []
  }
},
firestore: {
  recipes: recipeRef
},
created() {
  db.collection('recipes').get().then((onSnapshot) => {
    this.loading = false
    onSnapshot.forEach((doc) => {
      let data = {
        'id': doc.id,
        'name': doc.data().name
      }
      this.recipes.push(data)
    })

  })
}

我没有使用 Vuex。添加数据、编辑和阅读工作正常。只是不反映数据更改后的更改。也许我应该使用一个生命周期钩子？对于“ onSnapshot” - 我试过“ snap”，“ querySnapshot”等。没有运气。

提前致谢。

Answer 1

删除get()并用快照替换 - 就像这样

created() {
  db.collection('recipes').onSnapshot(snap => {
      let foo = [];
      snap.forEach(doc => {
       foo.push({id: doc.id, name: doc.data().name})

       });
    }
});