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

Question

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

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

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

到目前为止我得出的是:

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

然后在我的vue app组件中-

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

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

我查看并找到了那段代码，但是它太长而且效率不高:

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

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

Answer 1

首先进行健全性检查:firebase{} construct 不会自动成为 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}}在组件模板中，从这些路径访问 firebase 数据。

你不需要在你的组件中做这样的事情:

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

因为 vuefire 会为您处理这些绑定(bind)。

一旦您掌握了 firebase 引用，您可以选择将其作为常规 prop 传递给子组件并且绑定(bind)将继续在子组件中工作。因此，例如，如果该父组件的模板包含 <child-component :foo="foo" :bar="bar"></child-component>然后 child 会像这样读取数据:

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

将数据库引用作为组件 props 传递是可选的，但在许多情况下可能比让每个子组件从 Firebase 请求自己的数据引用更简单。 (在性能方面没有太大差异；对于来自不同组件的重复请求，Firebase 显然是 handles its own cacheing internally。)

长话短说

查看您在评论中发布的屏幕截图:如果这就是您在 this.users 中得到的内容，看起来您的数据绑定(bind)正在工作，但可能指向数据库中的错误路径，或者您的数据库结构可能不是您所期望的:您有一个包含三个对象的数组，而不是一个 user。对象。