使用vuejs，如何将firebase（vuefire）对象放入组件数据答案

【问题标题】：With vuejs, how do I get firebase (vuefire) object into component data使用vuejs，如何将firebase（vuefire）对象放入组件数据
【发布时间】：2018-08-23 16:56:43
【问题描述】：

使用 firebase 4.10.1 和 vuefire 1.4.5。

我已经确认我已经初始化了firebase，导出了一个db const，并且正确地导入了vuefire。

我正在尝试将我的 firebase 对象 (JSON) 加载到我的 dataTable 组件数据中。

我正在尝试这个：

export default {
    firebase: function () {
       return {
           fbObj: db.ref('collection')
       }
    },
    data () {
        return {
            dataTable: fbObj
        }
    }
 }

连接正确，因为如果我在模板中使用{{ fbObj }}，我会得到完整显示的 JSON 对象。但是，如果我尝试将其加载到 dataTable 上，我会得到 "fbObj is not defined" 作为控制台错误。

如何将我的 firebase 对象加载到 dataTable 上？

【问题讨论】：

标签： firebase firebase-realtime-database vue.js vuefire element-ui

【解决方案1】：

代码：

firebase: function () {
   return {
       fbObj: db.ref('collection')
   }
},

创建一个可用于您的 Vue 实例的this.fbObj。所以正确的不是dataTable: fbObj，而是：

data () {
    return {
        dataTable: this.fbObj   // but even this won't work
    }
}

但这行不通。您不能这样做，因为 data() 初始化代码将在 fbObj 初始化之前执行（从 firebase 更新它需要一些时间）。

因此，如果您希望 dataTable 引用该集合，任一：

重命名 firebase 对象为dataTable：

firebase: function () {
   return {
       dataTable: db.ref('collection')
   }
},

或者创建一个computed属性：

firebase: function () {
   return {
       fbObj: db.ref('collection')
   }
},
computed: {
    dataTable() {
        return this.fbObj;
    }
}

然后你可以在 Vue 实例 JavaScript 中使用 this.dataTable 或在模板中使用 dataTable。

【讨论】：

非常感谢！我刚刚重命名了 firebase 对象，它按我的意愿工作。