Currently, I am following a tutorial on YouTube to enhance my knowledge about storing data in Firebase and then utilizing it in a Vue application. (You can watch the tutorial at this link: https://www.youtube.com/watch?v=Htt8AKeF1Kw, you will encounter the issue at the 5-minute mark)
Although I have been diligent in replicating everything demonstrated in the tutorial, I am facing an obstacle where the data does not display in my Vue project. Upon inspecting the console, I noticed the error message: "onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement."
I retrieve 'animes' from Firebase using the code snippet provided below in firebase.js
export const loadAnimes = () => {
const animes = ref([])
const close = animeCollection.onSnapshot(snapshot => {
animes.value = snapshot.docs.map(doc => ({
id: doc.id, ...doc.data()
}))
onUnmounted(close)
return animes
})
This retrieved data is then passed onto a component within my Vue project.
UPDATE: I managed to resolve the issue by rectifying my mistake – placing onMounted(close) and return animes two lines below as shown in the revised code snippet:
export const loadAnimes = () => {
const animes = ref([])
const close = animeCollection.onSnapshot(snapshot => {
animes.value = snapshot.docs.map(doc => ({
id: doc.id, ...doc.data()
}))
})
onUnmounted(close)
return animes
}