VueJs + Firebase - 如何读取简单数据

Question

我知道这是一个非常简单的问题，但我在任何地方都找不到简单的答案。

我开始使用 Firebase，我只想获取用户的所有信息，然后将其粘贴到我的应用中需要的位置。

例如，我有数据库，里面有“用户”——然后是键（比如 -KjVkK3QCAXxMCfdyROe），然后是所有信息（姓名、年龄、工作......）。

到目前为止，我得出的结论是：

let app = Firebase.initializeApp(config)
let db = app.database()
let usersRef = db.ref('Users')

然后在我的 vue 应用程序组件中 -

firebase: {
  users: usersRef.child('-KjVxBYyKv3_PFLavId3')
},

现在我想知道如何获得姓名，年龄，工作价值？我试过this.users.name- 但它是未定义的。

我查看并找到了该代码，但它太长且效率不高：

this.users.on("value", function(snapshot) {
  var username = snapshot.val().name;
});

请伸出手帮助我了解如何到达对象并像常规对象一样简单地获取信息。如何将 Firebase 引用转换为简单的对象？

Answer 1

首先进行完整性检查：该firebase{}构造不会自动成为 vuejs 的一部分。你安装了vuefire吗？

Vuefire 支持两种不同的向组件传递数据的方式：

let app = Firebase.initializeApp(config)
let db = app.database()

Vue.component('myComponent', {
  firebase: function() {return {
    foo: db.ref('path/to/foo')
  }},
  mounted: function() {return {
    this.$bindAsArray('bar',db.ref('path/to/bar')); // or use $bindAsObject depending on the type of data you're loading
  }}
}

这就是所有必要的；您现在可以使用this.foo，并this.bar在组件代码，或{{foo}}和{{bar}}分量模板，从这些路径访问火力数据。

您不需要在组件中执行此类操作：

this.users.on("value", function(snapshot) {
  var username = snapshot.val().name;
});

因为 vuefire 会为你处理这些绑定。

一旦你拥有了一个 firebase 引用，你可以选择将它作为常规传递给子组件，prop并且绑定将继续在子组件中工作。因此，例如，如果包含该父组件的模板，<child-component :foo="foo" :bar="bar"></child-component>则子组件将像这样读取数据：

Vue.component('childComponent', {
  props: ['foo','bar'],
  // ...
}

将数据库引用作为组件 props 传递是可选的，但在许多情况下，这比让每个子组件从 Firebase 请求自己的数据引用更简单。（在性能方面没有太大区别；Firebase 显然在内部处理自己的缓存以处理来自不同组件的重复请求。）

TL; 博士

查看您在评论中发布的屏幕截图：如果这就是您所获得的内容this.users，那么您的数据绑定似乎正在运行，但可能指向数据库中的错误路径，或者您的数据库结构可能不是您所期望的：你有一个由三个对象组成的数组，而不是一个user对象。