Vuex 스토어에서 Firestore 스냅샷 수신기를 제거하는 방법

Vuex 스토어에서 Firestore 스냅샷 수신기를 제거하는 방법

내 vue3/vuex 저장소에서 스냅샷 수신기를 제거하는 방법을 찾고 있다.다른 유사한 질문에 대한 답변과 Firestore 문서에 대한 많은 링크를 보았지만, 구독 취소를 위해 전화를 걸 수 있는 Vuex 스토어의 위치를 파악할 수 없다().Vuex를 사용하는 동안 수신거부() 함수를 호출하는 데 누군가 도움을 줄 수 있는가?

나는 저장소에 있는 bindAcc()에 전화를 거는 구성 요소가 있는데, 이 구성 요소는 커밋/뮤티션을 실행하고 내 "계정 상태"를 채운다.내 vuex 저장소 파일에 있는 코드는 다음과 같다.

import { createStore } from 'vuex'
import { db } from '../main'

export default createStore({
  state() {
    return { categories: [], accounts: [], transactions: [], count: 1 }
  },
  mutations: {
    SET_ACCTS(state, data) {
      state.accounts = data
    },

  },
  actions: {
    bindAccts({ commit }) {
      this.unsubscribe = db
        .collection('accounts')
        .onSnapshot(function(querySnapshot) {
          let accounts = []
          querySnapshot.forEach(function(doc) {
            accounts.push(doc.data())
          })
          commit('SET_ACCTS', accounts)
        })
    },
...

내 테스트 구성 요소 내에서 bindAccts()를 이렇게 호출하고 ui에 계정 상태를 빠르게 표시한다.

<template>
  <button @click="bindAccts">Subscribe</button>
  <button @click="unsubscribe">Unsubscribe</button>
  <p>Accounts: {{ accounts }}</p>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  components: {},

  data() {
    return {}
  },

  computed: {
    ...mapState({ accounts: state => state.accounts })
  },

  methods: {
    ...mapActions(['bindAccts', 'unsubscribe'])
  }
}
</script>

<style></style>

이렇게 하면 구독 취소 기능을 찾을 수 없다.

가능한 해결책은 두 가지가 있다.

반품unsubscribe동작 및 호출 구성 요소로부터 기능함

1. Vuex 작업에서unsubscribe로부터bindAccts({ commit }).
2. 구성 요소에서 구독 단추에 대해onClick핸들러 함수(새 함수)를 호출하면bindAccts반환된 기능을 로컬에 저장data또는 변수.
3. 그런 다음 사용자가 가입 취소를 클릭하면 저장된 로컬로 전화를 걸기unsubscribe정의되어 있는 경우

아니면

저장하다unsubscribe당신의 Vuex 상점에서.

1. 그 아이디어는 그 사람들을 살리는 것이 될 것이다.unsubscribe기존 Vuex 저장소에서 상태 변수로 사용 중인 변수Getters그리고Mutations변수를 가져오거나 설정하려면(현재 상태의 다른 속성으로 표시됨).
2. 그리고 나서, 너는 추가할 수 있다.unsubscribe다른 Vuex 작업으로, 그리고 구성 요소에서 다음을 사용하십시오.mapActions동작을 하나의 방법으로 매핑한다.그 논리는 아주 간단할 것이다.

참조URL: https://stackoverflow.com/questions/65545967/how-do-i-remove-a-firestore-snapshot-listener-from-a-vuex-store