Question

我无法从 Firebase 获取数据到 Vue

2022-02-07

431

javascript firebase vue.js google-cloud-firestore

我正在关注 Youtube 教程，以了解有关在 Firebase 中存储数据，然后在 Vue 中与其交互的更多信息。 https://www.youtube.com/watch?v=Htt8AKeF1Kw （5:00 是我面临的问题）

基本上我遵循了那里的所有内容，但数据没有显示在我的 vue 项目中，当我打开控制台时，我看到：当没有要关联的活动组件实例时，会调用 onUnmounted。生命周期注入 API 只能在执行 setup() 期间使用。如果您使用的是异步 setup()，请确保在第一个 await 语句之前注册生命周期挂钩。

我正在使用 firebase.js 上的以下代码从 Firebase 加载“animes”

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
})

然后我将它传递给一个组件

编辑：修复了这个问题，这是我的错误，onMounted(close) 和 return animes 应该在下面 2 行

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
}

Answer 1

您确定您在 setup() 中写了它吗？

setup() {
    onUnmounted(() => {
      ...
    })
}```

Anıl Şahin

2022-02-07

Answer 2

问题出在我这边，基本上 unMounted(close) 和 return animation 应该在下面两行

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
}