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})

       });
    }
});

Answer 2

我不熟悉firestore API，但是浏览一下文档，看起来调用get()就是你一次查询的方式。您onSnapshot的位置应该是querySnapshot - 也就是一个查询的结果。参见：

https://firebase.google.com/docs/firestore/query-data/get-data

与

https://firebase.google.com/docs/firestore/query-data/listen

因此，要获得实时更新，您似乎需要创建一个侦听器，如下所示：

db.collection('recipes')
    .onSnapshot(function(snapshot) {
        snapshot.forEach(function(doc) {
            // Find existing recipe in this.recipes
            // and swap in the new data
        });
    }, function(error) {
        // handle errors
    });

我认为您需要将添加添加到您当前正在进行的get()查询中。希望这有帮助！

Vuejs＆amp; Firestore - 如何在Firestore中更改数据时更新

2 个答案: