Проблема с удалением данных из базы данных в реальном времени

Question

У меня небольшая проблема с удалением данных из базы данных Firebase Realtime в списке пользователей, сделанном в Vue.js v-for.В моем небольшом проекте у меня есть база данных, которая возвращает данные Vuex о пользователях, и когда я удаляю любого пользователя с помощью функции firebase .remove () , представление в компоненте перерисовывается, но с дублированными данными.Тогда мой список выглядит как старый список с этим удаленным пользователем + еще один список без этого пользователя.Когда я обновляю страницу, мой список выглядит хорошо, без этого удаленного пользователя.

Кто-нибудь что-нибудь думает по этому поводу?

Компонент ПОЛЬЗОВАТЕЛЬ, который удаляет данные в Firebase, он работает хорошо, потому что в базе данных этот пользовательудаляется без проблем:

methods: {
  removeUser() {
    firebase
      .database()
      .ref(`users/${this.user.id}`)
      .remove()
  }
}

Я не удаляю это вручную из Vuex, потому что эта функция .remove () запускает мою функцию для сохранения данных в Vuex:

initUsers() {
  firebase
    .database()
    .ref('/users')
    .on('value', snapshot => {
      snapshot.forEach( childSnapshot => {
        this.usersList.push({
          username: childSnapshot.val().email,
          admin: childSnapshot.val().admin,
          id: childSnapshot.key
        })
      })
    });
},

Answer 1

Я думаю, это связано с тем, что вы не реинициализируете массив usersList в своем слушателе.

Итак, вы заполняете его один раз при первом отображении страницы, а затем, когдазапись удаляется в бэкэнде, (все еще) существующие записи в базе данных (снова) передаются в исходный массив.

Если вы сделаете что-то подобное, это должно сработать:

initUsers() {
  firebase
    .database()
    .ref('/users')
    .on('value', snapshot => {
      this.usersList = [];  //<-- init to empty array
      snapshot.forEach( childSnapshot => {
        this.usersList.push({
          username: childSnapshot.val().email,
          admin: childSnapshot.val().admin,
          id: childSnapshot.key
        })
      })
    });
},