用于从 Vue 组件中的 Firebase 检索数据的生命周期挂钩

【问题标题】：Lifecycle hook for retrieving data from Firebase in a Vue component用于从 Vue 组件中的 Firebase 检索数据的生命周期挂钩
【发布时间】：2021-10-19 15:57:21
【问题描述】：

我有一个 Vue 2 组件，它使用 Vuefire 以声明方式与 Firebase 实时数据库绑定：

import { db } from '../firebase/db'
export default {
    data: () => ({
        cats: []
    }),
    firebase: {
        cats: db.ref('cats')
    },
    mounted: function() {
        // loop over this.cats
    }
}

我希望组件在安装时循环遍历cats 属性。问题是当它被挂载时，它还没有从数据库中检索到猫。有没有一种简单的方法可以抓住这一点？还是我必须告别这种简洁的数据获取方式并在mounted 中完成这一切？

【问题讨论】：

标签： javascript firebase vue.js firebase-realtime-database vuefire

【解决方案1】：

正如 declarative binding 的 vuefire 文档中所述：

firebase 选项中提供的任何数据库引用都将绑定在创建（在Vue的created钩子之后）到指定的key上组件

因此，您实际上不需要在 mounted 挂钩中添加任何内容。如果你想在 cats 数组被填充时触发一个动作，你可以使用标准的 Vue.js watch。

如果您不想订阅 RTDB cats ref 中的实时更改（即在 vuefire 词汇表中进行绑定）并且只想读取一次 cats 节点数据安装组件后，您应该使用标准 Firebase JS SDK，如 vuefire 文档中的 here 所述。

【讨论】：