修复onSnapshot()方法多次触发

Question

我有一个vue-cli-4应用程序与多种路线和vuex。Firestore数据库已经成功连接--我的应用程序立即反映了从Firestore控制台应用到DB的修改。

奇怪的行为在离开包含组件“同步”的路由之后开始发生，然后返回。在本例中，onSnapshot()方法在修改Fi还原控制台中的数据后多次触发。

我想知道我是否应该在每次离开路由后“手动”地从Firestore取消我的组件--也许是在 wonder ()钩子上。

代码部分:我正在通过在创建的PieChart.vue ()钩子上触发getDataPie操作来同步/pie组件(位于/pie路由上)。

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

export default {
  name: 'PieChart',

 created () {
   this.getDataPie()
 },

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

<template>
  ...
</template>

在vuex模块中：

import { getDataPie } from '../../helpers/helpersPie.js'

...

actions: {
  ...
  getDataPie: async ({ commit, getters }) => {
    await getDataPie()
  },
  ...
}

getDataPie函数，包含console.log，它允许我查看执行了多少次console.log：

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()的火灾次数与输入的路径/pie一样多。

Answer 1

从调用onSnapshot开始，Firebase将监听快照更改，直到通知它停止为止。因为您的代码从未告诉它停止，所以侦听器将继续进行，即使在您离开时也是如此。然后，当您导航回/Pie时，需要附加第二个侦听器。因此，此时您的onSnapshot侦听器将被执行两次。

有两种解决办法：

1. 检测您已经附加了一个侦听器，当您重新访问相同的路径时，不要附加它。
2. 当您从/Pie导航时，取消注册侦听器。为此，您可以调用从onSnapshot返回的函数： 变量退订=db.collection(‘费用’).onSnapshot(…)； 然后以后： 取消订阅()； 还请参阅疏离听者上的Firebase文档。