我有一个具有多个路由和vuex的vue-cli-4应用程序。 Firestore数据库已成功连接-我的应用程序立即反映了从Firestore控制台应用于数据库的修改。
离开包含与Firestore“已同步”的组件的路由,然后返回时,就会发生奇怪的行为。在这种情况下,在Firestore控制台中修改数据后,onSnapshot()方法将触发多次。
我想知道是否应该在离开路由后每次以某种方式“手动”从Firestore取消订阅我的组件-也许是在destroy()钩子上。
代码部分:通过在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>
在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
侦听器将被执行两次。
有两种解决方案:
检测到您已经附加了一个侦听器,并且在重新访问同一路由时不要附加它。
当您离开/Pie
导航时,请取消注册侦听器。通过调用从onSnapshot
返回的函数来执行此操作:
var unsubscribe = db.collection('expenses').onSnapshot(...);
然后再:
unsubscribe();
另请参阅detaching listeners上的Firebase文档。
关于javascript - Firestore onSnapshot()方法触发多次,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59467884/