是否可以在 Vue 应用程序中呈现 Firebase 数据的实时变化？

Question

我在 Vue 应用程序中使用 Firebase 进行身份验证和数据库。我正在开发的组件会监听特定用户的“朋友”集合中的变化。

我只想在实时反映数据库更改的同时显示朋友列表。

到目前为止，我采取了两种方法，都导致成功捕获更改的相同问题，但无法在 dom 中显示更改。

方法一

在 created() 函数中，我使用 .onSnapshot() 函数添加我的侦听器。这成功地捕获了数据库中的更改。但是，如果我将 this.friends 设置为更新后的值，屏幕不会改变。

方法2

使用 Vuex 加载好友列表。我为商店创建了一个监视功能，可以成功跟踪更改。但是在这个手表功能中更改this.friends也不会更新屏幕。

对简单变量的反应按预期工作。

<template>
  <v-container fluid>
    {{ friends }}
  </v-container>
</template>

<script>
import db from '@/firebase/firestore'
import firebase from 'firebase'

export default {
  name: 'Test',
  data() {
    return {
      friends: []
    }
  },
  created() {
    let firebaseUser = firebase.auth().currentUser
    let ref = db.collection('users')
    ref.where('user_id', '==', firebaseUser.uid).limit(1).get()
    .then( snapshot => {
      if (snapshot.docs[0].data()) {
        db.collection("users").doc(snapshot.docs[0].id)
        .onSnapshot(function(doc) {
          let user = doc.data()
          console.log('friends', user.friends) // outputs correctly
          this.friends = user.friends // does not update dom
        })
      }
    })
  },
}
</script>

Answer 1

您可以按如下方式设置监听器：

<template>
   <v-container fluid>
      {{ friend }}
   </v-container>
</template>

<script>
import db from '@/firebase/firestore'
import firebase from 'firebase'

export default {
  name: "Test",
  data() {
    return {
      friend: null
    };
  },
  created() {
    const firebaseUser = firebase.auth().currentUser
    const ref = db.collection('users')

    ref
      .where('user_id', '==', firebaseUser.uid)
      .limit(1)
      .onSnapshot(querySnapshot => {
         let f = querySnapshot.docs[0].data();
         f.id = querySnapshot.docs[0].id;
         this.friend = f;
      });
  }
};
</script>

<style>
</style>

---

仅供参考，如果要删除.limit(1) 并显示所有friends，请执行以下操作：

<template>
  <v-container fluid>
    <template v-for="f in friends">
      <div>{{ f.id }}</div>
    </template>
  </v-container>
</template>

<script>
import db from '@/firebase/firestore'
import firebase from 'firebase'

export default {
  name: "Test",
  data() {
    return {
      friends: []
    };
  },
  created() {
    const firebaseUser = firebase.auth().currentUser
    const ref = db.collection('users')

    ref
      .where('user_id', '==', firebaseUser.uid)
      .onSnapshot(querySnapshot => {
        var fArray = [];
        querySnapshot.forEach(doc => {
          let f = doc.data();
          f.id = doc.id;
          fArray.push(f);
        });
        this.friends = fArray;
      });
  }
};
</script>

<style>
</style>

Answer 2

如果你使用 Vuex，你是否使用 Vuex，那么首先你必须在 Computed Property 中导入 getter，否则如果你不使用 Vuex，你必须观察正在变化的数据。 您必须观看 Computed Property Remember 组件将仅重新渲染数据属性更改，如果数据更改然后 vue 知道该组件中的某些更改，它将重新渲染该组件 您必须按照以下答案为您提供解决方案 Watching Computed Property in Vue