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

Posted 2023-02-22

【中文标题】用于从 Vue 组件中的 Firebase 检索数据的生命周期挂钩

【英文标题】：Lifecycle hook for retrieving data from Firebase in a Vue component

【发布时间】：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 中完成这一切？

【参考方案1】：

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

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

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

---

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