从实时数据库中删除数据的问题

Question

我在从 Vue.js v-for 制作的用户列表中的 Firebase Realtime 数据库中删除数据时遇到了一个小问题。 在我的小项目中，我有一个数据库，它返回到有关用户的 Vuex 数据，当我通过 firebase 函数 .remove() 删除任何用户时，组件中的视图被重新渲染，但数据重复。然后我的列表看起来像这个已删除用户的旧列表+没有这个用户的列表再一次。当我刷新页面时，我的列表看起来不错，没有这个已删除的用户。

有人想过吗？

在 Firebase 中删除数据的组件 USER，它工作得很好，因为在数据库上这个用户被删除没有问题：

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
        })
      })
    });
},