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

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

我开始玩弄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引用转换为简单对象？

最好开始将其用作状态管理

由于从firebase获取数据是异步的，因此必须在vuex操作中执行获取过程

在vuex操作中，您可以提交突变，这些是同步更改

因此，对于您的使用，vuex存储将是：

import Vue from 'vue'
import Vuex from 'vuex'
import * as firebase from 'firebase'

Vue.use(Vuex);

export const store = new Vuex.Store({
    state:{
        user:{
            userName:'',
            orherData: null,
            someOtherData: null
        }
    },
    getters:{
        //getters return the state and can be used in your components to get the current value of the state,

        getUserInfo: (state) => {
            return state.user;
        }
    },
    mutations:{
        //mutation gets state as the 1st parameter and the paylozd you passed in the action you commited thiz mutation as 2nd parameter

        addUserInfo:(state, userInfo) => {

            //here you can change or mutate the values present in the state , in your case user.

            state.user.userName = userInfo.name;

        }
    },
    actions:{
        fetchUserData:({commit}) => {
            const ref = firebase.database().ref('Users');
            ref.child('-KjVxBYyKv3_PFLavId3').on('value', (snap) => {
                //you commit the  mutation passing the snapshot value you recieved from firebase as payload to the mutation
                commit('addUserInfo', snap.val());
            });
        }
    }

}); 

centalized state的优势在于，使用vuex现在可以通过使用getter访问任何组件中的用户信息，如下所示：

computed:{
    userInfo: this.$store.getters.getUserInfo;
}

---

计算出的属性userInfo可以首先在组件的html中使用：

firebase{}

构造不会自动成为vuejs的一部分。你有安装吗

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.users.on("value", function(snapshot) {
  var username = snapshot.val().name;
});

这是所有必要的；现在，您可以在组件代码中使用

this.foo

和

this.bar

，或者在组件模板中使用

{foo}

和

{bar}

，从这些路径访问firebase数据

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

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.users.on("value", function(snapshot) {
  var username = snapshot.val().name;
});

因为vuefire为您处理这些绑定

持有firebase引用后，可以选择将其作为常规

道具

传递给子组件，绑定将继续在子组件中工作。因此，例如，如果父组件的模板包含

，则子组件将像这样读取数据：

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

作为组件道具传递数据库引用是可选的，但在许多情况下可能比让每个子组件从Firebase请求自己的数据引用更简单。（性能方面没有太大差异；Firebase显然支持来自不同组件的重复请求。）

TL；博士

---

查看您在评论中发布的屏幕截图：如果这是您在

this.users

中得到的，则看起来您的数据绑定正在工作，但可能指向数据库中的错误路径，或者你的数据库结构可能不是你所期望的：你有一个由三个对象组成的数组，而不是一个单一的

user

对象。

你能打印并检查这是什么吗。usersvuex很棒，但不是每个项目都需要一个全面的状态管理解决方案。@DanielBeck shon levi问：“我只想获得用户的所有信息，而不是粘贴。”在我的应用程序中我需要它。但通过使用道具，只能从父对象到子对象传递数据。如果有嵌套的组件呢。这就是为什么我建议使用vuex，这样他就可以随时随地访问州。没想到肖恩·列维所问的下行技术并不依赖于通过道具传递数据；

firebase{}

构造可以在任何组件中使用。我真的不同意这回答了这个问题——vuex对于需要额外复杂性的应用程序来说是不错的，但这不是问题所在——但否决票可能有点过头了，我已经删除了它。@DanielBeck因为他希望用户数据可以在不同的地方使用，所以我认为我的回答会有所帮助。非常感谢。