Блог

 //Environment:  //Vue 3 //Vite //Firebase V9 //Pinia** (For state management)  

Привет!, я просто пытаюсь отписаться от слушателей firestore от действий Pinia… по этому поводу я приведу краткий пример того, как это делается.

Поэтому сначала в моем магазине Pinia я определил свойство, в котором хранятся все прослушиватели (onSnapshot), чтобы позже получить доступ к функции отмены подписки из любой точки моего приложения.

 //Pinia store: frontDesk.ts    import {defineStore} from 'pinia'  import {db} from "/@src/firebase/config";  import { collection, query, where, onSnapshot, doc, getDoc, orderBy } from "firebase/firestore";    import {commonStore} from "/@src/stores/stores";    export const useFrontDeskStore = defineStore({  id: 'frontDesk',  state: () =gt; ({  ...    listeners: lt;anygt;{  ...  getAvailability: () =gt; null,  ...  }  }),  ...  actions: {  ...  async getAvailability() {  const q = query(collection(db, commonStore.selectedHotel, "guest", "reservations"), where('noShow', '==', false), where('cancelled', '==', false), orderBy("checkinDate", "desc"));  this.listeners.getAvailability = onSnapshot(q, (docSnapshot) =gt; {  commonStore.masterLoader = true  this.loadingAvailability = true  this.reservations.splice(0, this.reservations.length)  this.occupiedRooms.splice(0, this.occupiedRooms.length)  docSnapshot.forEach((doc) =gt; {  const data = doc.data()  if (rangesOverlaps([this.dateRange?.start, this.dateRange!.end], [firestoreToDate(data.checkinDate), firestoreToDate(data.checkoutDate)])){  this.reservations.push(data)  this.occupiedRooms.push(parseInt(data.roomNumber), ...data.extra_rooms)  }  })  this.getBlockedRooms()  commonStore.masterLoader = false  });  },  ...  }  })  

Затем, проверив неактивность пользователя, я получаю доступ к функции отмены подписки следующим образом:

 //FrontDesk.vue  //IDLE  ...  import { useIdle } from '@vueuse/core'  const { idle, lastActive } = useIdle(5000) // 5 seconds (for testing purposes)    watch(idle, val =gt; {  idleAction(val)  })    const idleAction = async (isIdle) =gt; {  if (isIdle) {  console.log("Inactivity detected, stopping listeners to save some money")  await frontDeskStore.listeners.getAvailability()  } else {  console.log("Activity detected, re-activating listeners for realtime updates")  await frontDeskStore.getAvailability()  }  }  ...  

Кажется, что все проходит без ошибок, но затем от другого клиента я вношу некоторые изменения после того, как отписка была отменена, и продолжаю получать обновления в режиме реального времени.

Есть ли что-нибудь, чего мне здесь не хватает?