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

Posted 2023-02-22

【中文标题】VueJs + Firebase - 如何读取简单数据

【英文标题】：VueJs + Firebase - how to read simple data

【发布时间】：2017-10-05 06:45:23

【问题描述】：

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

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

【问题讨论】：

你能打印并检查一下 this.users 是什么

i.imgur.com/qgawE4r.jpg

【参考方案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 对象。

【参考方案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 中使用

【讨论】：

vuex 很棒，但并不是每个项目都需要全面的状态管理解决方案。

@DanielBeck shon levi 问：'我只想获取用户的所有信息，而不是将其粘贴到我需要的应用程序中'。但是通过使用道具传递数据只能从父母到孩子。如果有嵌套组件怎么办。所以这就是为什么我建议使用 vuex 以便他可以在任何他喜欢的地方访问状态。没想到会投反对票

shon levi 询问的技术不依赖于通过 props 传递数据； firebase 构造可用于任何组件。我真的不同意这回答了所提出的问题——vuex 对于需要这种额外复杂性的应用程序来说很好，但这不是问题所在——但否决票可能有点过分了，我已经删除了它。

@DanielBeck 因为他希望用户数据可以在不同的地方使用，所以我认为我的回答会有所帮助。谢谢