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}}，从这些路径访问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'],
  // ...
}

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

TL;DR

查看您在 cmets 中发布的屏幕截图：如果这就是您在 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 中使用