Question

我正在尝试使用Firestore实现一个侦听器，该侦听器允许我实时查看更新，但是不幸的是我不能。这是我的代码的一部分：

db.collection('users/user')
    .onSnapshot(function(snapshot) {
      snapshot.docChanges().forEach(function(change) {
        if (change.type === "added") {
          console.log("New user: ", change.doc.data());
        }
        if (change.type === "modified") {
          console.log("Modified user: ", change.doc.data());
          const data = {
            id: change.oldIndex,
            name: change.doc.data().name,
            surname: change.doc.data().surname
          };
          vm.users.push(data);
        }
        if (change.type === "removed") {
          console.log("Removed user: ", change.doc.data());
        }
      });
    });

当发生“修改”事件时，我看不到页面的任何变化，但是如果我将结果打印在控制台中，则可以正确看到新数据。

我该如何解决？

Answer 1

考虑到此问题中共享的代码部分，user数组的构造或使用方式或位置并不明显。是prop，data或state-container数据吗？

总体而言，您的侦听器功能看起来不错。这就是为什么您在控制台上看到数据的原因。这里缺少的部分是如何分配它以在前端使用。

如果您使用的是Vuex状态容器，则可以使用突变。 Props可能会在刷新时丢失。数据或计算出的属性将更适合来自Firestore的实时监听数据。

如果它是组件数据，那么您可能想使用this关键字重试。

Vue中的实时侦听器中的Firestore更新

1 个答案: