Firestore onSnapshot() 方法多次触发

Question

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

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

我想知道每次离开路线后我是否应该以某种方式“手动”从 Firestore 取消订阅我的组件 - 可能是在destroy()钩子上。

代码的一部分：我同步PieChart.vue通过发射与公司的FireStore组件（位于/派路线）getDataPie行动（）创建挂钩。

<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，它允许我查看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()触发的次数与输入route /pie 的次数一样多

Answer 1

从您调用 的那一刻起onSnapshot，Firebase 将监听快照更改，直到您告诉它停止。由于您的代码从不告诉它停止，因此即使您离开，侦听器也会继续。然后，当您导航回 时/Pie，您附加了第二个侦听器。因此，此时您的onSnapshot侦听器将被执行两次。

有两种解决方案：

1. 检测你已经附加了一个监听器，当你重新访问相同的路由时不要附加它。

2. 当您离开 时取消注册侦听器/Pie。您可以通过调用从 返回的函数来执行此操作onSnapshot：

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

   然后后来：

   unsubscribe();
   

   另请参阅有关分离侦听器的 Firebase 文档。