Firestore onSnapshot() 메서드가 여러 번 실행됩니다.

Firestore onSnapshot() 메서드가 여러 번 실행됩니다.

여러 경로와 vuex가 있는 vue-cli-4 앱이 있습니다.Firestore 데이터베이스가 성공적으로 연결되었습니다. - 내 앱은 Firestore 콘솔에서 DB에 적용된 수정 사항을 즉시 반영합니다.

Firestore와 "동기화된" 컴포넌트가 포함된 루트를 떠난 후 다시 돌아오면 이상한 동작이 발생합니다.이 경우 onSnapshot() 메서드는 Firestore 콘솔에서 데이터를 변경한 후 여러 번 실행됩니다.

루트 이탈 후 매번 Firestore에서 컴포넌트를 "수동으로" 해제해야 하는지 궁금합니다(아마도 destrated() 훅으로).

코드 부분:created() 훅에서 getDataPie 액션을 실행하여 (/pie 루트에 있는) PieChart.vue 컴포넌트를 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()
  },
  ...
}

console.log를 포함하는 getDataPie 함수에서는 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')
  })
}

루트 / pie가 입력된 횟수만큼 onSnapshot()이 기동하는 것처럼 보입니다.

전화하는 순간부터onSnapshotFirebase는 사용자가 정지 명령을 내릴 때까지 스냅샷 변경을 수신합니다.코드상으로는 정지하지 않기 때문에 리스너는 네비게이트를 해도 계속합니다.그런 다음 로 돌아가면/Pie두 번째 청취자를 연결합니다.그래서 그 시점에서onSnapshot청취자가 두 번 실행됩니다.

두 가지 솔루션이 있습니다.

1. 이미 리스너를 접속하고 있는 것을 검출해, 같은 루트를 재방문할 때는 접속하지 말아 주세요.

2. 에서 벗어나면 리스너 등록을 취소한다./Pie이 조작은 반환된 함수를 호출하여 실행합니다.onSnapshot:

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

   그리고 나중에:

   unsubscribe();
   

   청취자 분리 관련 Firebase 문서도 참조하십시오.

언급URL : https://stackoverflow.com/questions/59467884/firestore-onsnapshot-method-fires-multiple-times