Currently, I'm utilizing Firestore to retrieve the stored data in my vuex store. One aspect that is puzzling me is how to properly detach the listener when, for instance, a user signs out.
fetchExercises ({commit, getters}) {
const db = firebase.firestore()
const exercises = db.collection('exercises').where('userId', '==', getters.user.uid)
// Real time feed retrieval
exercises.onSnapshot(querySnapshot => {
commit('setLoading', true)
let source = querySnapshot.metadata.hasPendingWrites ? 'Local' : 'Server'
console.log(`Source ${source}`)
if (querySnapshot) {
querySnapshot.forEach(doc => {
commit('watchExercises', {
title: doc.data().title,
language: doc.data().language,
translated: doc.data().translated,
lastOpen: doc.data().lastOpen,
dueDate: doc.data().dueDate,
uid: doc.data().uid,
userId: doc.data().userId,
words: doc.data().words,
shared: false
})
const exercise = {
title: doc.data().title,
uid: doc.data().uid,
lastOpen: doc.data().lastOpen,
language: doc.data().language,
translated: doc.data().translated,
dueDate: doc.data().dueDate,
words: doc.data().words,
shared: false
}
commit('updateExercises', exercise)
})
}
if (querySnapshot.size === getters.loadedExercises.length) {
commit('setLoading', false)
}
})
}
The above action handles data fetching. My current dilemma revolves around how to detach the listener within another action, such as signing out.