I'm following a Youtube tutorial to learn more about storing data in Firebase and then interacting with it in Vue. https://www.youtube.com/watch?v=Htt8AKeF1Kw (at 5:00 is the problem I'm facing)
Basically I follow everything there but the data doesn't show on my vue project and when I open console I see: 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'm loading 'animes' from Firebase with the following code on 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
})
From this then I pass it to a component
EDIT: Fixed the issue, it was a mistake on my end, onMounted(close) and return animes should be 2 lines below
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
}
Are you sure you wrote it in setup()?
setup() {
onUnmounted(() => {
...
})
}```
The issue was on my end, basically unMounted(close) and return anime should be two lines below
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
}