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')
},

现在我想知道如何获得姓名，年龄，工作价值？我试过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}}，以从这些路径访问firebase数据。

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

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'],
  // ...
}

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

TL; DR

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

Answer 2

最好开始使用vuex作为州管理。

由于从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());
            });
        }
    }

});

中心化状态的优势在于使用vuex是现在您可以使用getter访问任何组件中的用户信息，如下所示：

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

计算属性userInfo可以在组件的html中使用

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

2 个答案:

TL; DR