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

Question

我有一个 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 中完成所有操作？

Answer 1

如 declarative binding 的 vuefire 文档中所述：

Any Database Reference provided in a firebase option will be bound at creation (after Vue's created hook) to the specified key on the component

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

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

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

Lifecycle hook for retrieving data from Firebase in a Vue component

javascript

firebase

vue.js

firebase-realtime-database

vuefire