Можно ли визуализировать изменения в реальном времени в данных Firebase в приложении Vue?

Question

Я использую Firebase для аутентификации и базу данных в приложении Vue. Компонент, над которым я работаю, прослушивает изменения в коллекции «друзей» для конкретного пользователя.

Я бы просто хотел отобразить список друзей, отражая изменения из базы данных в режиме реального времени.

До сих пор я использовал два подхода, и оба приводят к одной и той же проблеме, заключающейся в успешной фиксации изменений, но не в состоянии отобразить изменения внутри домена.

Подход 1

В функции create () я добавляю слушателя, используя функцию .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, вы должны следить за тем, какие данные меняются. Вы должны следить за тем, чтобы компонент Computed Property Remember повторно отображал только изменение свойства данных, если данные меняются, тогда мы знаем, что что-то изменилось в этом компоненте, и он будет повторно отображать этот компонент. Вы должны следовать этому ответу ниже для вашего решения Просмотр компьютерной недвижимости в Vue