Question

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

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

我想知道是否每次离开路由后都应该以某种方式“手动”从Firestore退订-也许是在 destroyed（）钩子上。

代码部分：通过在 created（）上触发 getDataPie 操作，我正在将 PieChart.vue 组件（位于/ pie路线上）与Firestore同步。 strong>钩子。

<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（）触发的次数与输入路径 / pie 的次数一样

Answer 1

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

有两种解决方案：

检测到您已经附加了一个侦听器，并且在重新访问同一路由时不要附加它。
从/Pie导航离开时，取消注册侦听器。为此，您可以调用从onSnapshot返回的函数：
```
var unsubscribe = db.collection('expenses').onSnapshot(...);
```
再后来：
```
unsubscribe();
```
另请参阅detaching listeners上的Firebase文档。

Firestore onSnapshot（）方法触发多次

1 个答案: