Question

我正在使用Firebase进行身份验证以及Vue应用程序中的数据库。我正在使用的组件会监听特定用户在“朋友”收藏集中的更改。

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

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

方法1

在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中导入吸气剂，否则，如果您不使用Vuex，则必须注意正在变化的数据。您必须注意计算属性记住，如果数据更改，组件将仅重新呈现数据属性更改，然后您知道该组件中发生了某些更改，它将重新呈现该组件您必须按照以下答案为您解决方案 Watching Computed Property in Vue

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

方法1

方法2

2 个答案: