javascript - Firestore onSnapshot() 方法多次触发

标签 javascript vue.js vuejs2 google-cloud-firestore vuex

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

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

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

代码部分:我通过在 created()getDataPie 操作,将 PieChart.vue 组件(位于/pie 路由上)与 Firestore 同步强>钩子(Hook)。

<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 的次数一样

最佳答案

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

有两种解决方案:

  1. 检测到您已经附加了监听器,并且当您重新访问同一路线时不要附加它。
  2. 当您离开 /Pie 时取消注册监听器。您可以通过调用从 onSnapshot 返回的函数来执行此操作:

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

    然后:

    unsubscribe();
    

    另请参阅 detaching listeners 上的 Firebase 文档.

关于javascript - Firestore onSnapshot() 方法多次触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59467884/

相关文章:

javascript - 隐藏 div 中的所有元素,除了单击标签以在背景中显示 div

vue.js - 在 Vuetify 中将 Clipped prop 应用于 <v-navigation-bar/> 的正确方法

css - 如何更改 Vuetify 中文本字段的宽度和高度?

javascript - 如何将 Vue 方法调用到普通的 javascript 函数中?

javascript - Electron 标签意外地将所有标签源加载到同一个标签中

javascript - ngClass 不工作?

javascript - 我的无序列表是从 json 文件呈现的,但我希望每个列表元素周围都有一个边框

javascript - 将输入与因子绑定(bind)(v-模型)

vue.js - Vue-Router 中的未知元素 : <router-view> - did you register the component correctly?

javascript - 即使使用 Vue.set ,更新数组也不会在 Vue 中重新渲染