Javascript Firestore onSnapshot（）方法多次激发

我有一个vue-cli-4应用程序，具有多个路由和vuex。Firestore数据库已成功连接-我的应用程序立即反映从Firestore控制台应用于数据库的修改

离开包含与Firestore“同步”的组件的路由，然后返回后，开始发生奇怪的行为。在这种情况下，onSnapshot（）方法在修改Firestore控制台中的数据后多次激发

我想知道我是否应该在每次离开路线后以某种方式“手动”从Firestore取消订阅我的组件-可能是在destrocted（）hook上

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'PieChart',

 created () {
   this.getDataPie()
 },

 methods: {
   ...mapActions([
       ...
       'getDataPie',
       ...
    ])
  }
}
</script>

<template>
  ...
</template>

代码部分：我正在通过对created（）钩子启动getDataPie操作，将PieChart.vue组件（位于/pie路径）与Firestore同步

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'PieChart',

 created () {
   this.getDataPie()
 },

 methods: {
   ...mapActions([
       ...
       'getDataPie',
       ...
    ])
  }
}
</script>

<template>
  ...
</template>

getDataPie函数，包含console.log，允许我查看多少次 onSnapshot（）已执行：

export function getDataPie () {
  // get data from firestore, onSnapshot - changes listener
  let fdata = []
  return db.collection('expenses').onSnapshot(res => {
    console.log('-------on snapshot--------------')
    res.docChanges().forEach(change => {
    const doc = { ...change.doc.data(), id: change.doc.id }

    // forming data array
    switch (change.type) {
      case 'added':
        fdata.push(doc)
        break
      case 'modified':
        const i = fdata.findIndex(i => i.id === doc.id)
        fdata[i] = doc
        break
      case 'removed':
        fdata = fdata.filter(i => i.id !== doc.id)
        break
      default:
        break
      }
    })

    store.commit('SET_RECIEVED_DATA_PIE', fdata)
    !store.getters.initPie && store.commit('SET_INIT_PIE')
  })
}

---

从您调用

onSnapshot

的那一刻起，onSnapshot（）激发的次数与输入路由/pie的次数相同

，Firebase将侦听快照更改，直到您告诉它停止为止。因为您的代码从不告诉它停止，所以侦听器会继续，即使您导航到别处。然后，当您导航回

/Pie

时，附加第二个侦听器。因此，此时您的

onSnapshot

侦听器将执行两次

有两种解决方案：

检测您已经连接了一个侦听器，并且在重新访问同一路线时不要连接它

当您离开

/Pie

时，取消注册侦听器。您可以通过调用从

onSnapshot

返回的函数来执行此操作：

var unsubscribe = db.collection('expenses').onSnapshot(...);

后来：

unsubscribe();

另请参阅上的Firebase文档

---

这里的解决方案2通常是首选方案。解决方案1最好的唯一时间是，如果您希望用户离开某条路线，然后立即返回，因为此解决方案将防止您不必要地取消订阅和重新订阅。