使用vuejs加载页面时如何从Firebase获取数据? [英] How to get data from firebase when page loading using vuejs?

问题描述

我一直在尝试从Firebase获取当前用户数据，以在个人资料页面中显示详细信息.

I have been trying to get current user data from firebase to display details in profile page.

这里，我正在尝试在页面加载时从Firestore获取数据.我的表结构:用户=>当前用户UID =>电子邮件，名字，姓氏，公司名称等.

Here i am trying get data from firestore, when page loading. My table structure : users => Current user UID => email, firstname, lastname, businessname, etc.

我添加了一些功能，可以在加载个人资料页面时从Firebase获取数据，但是无法正常工作.控制台product.data().firstname中显示的错误不起作用.

I have added functionality to get data from firebase when profile page loading but does not work. error showing in console product.data().firstname is not function.

而且我是否没有检索到任何控制台输出的Firebase数据?

And also i did not get any console output firebase data retrieved or not?

这是我的代码:

<template>
<section class="what-we-do">
<div class="container-2" style="padding-top: 150px;">
    <div class="row">
        <div class="col-md-12">
            <div class="saving-process-crd">
            <div class="saving-process-inner">

                  <avatar :fullname="currentUser.email" size="96" >
                  </avatar>
                  <h4>Siva NSN</h4>
                  <h6 style="color:grey;">{{currentUser.email}}</h6><br><br>

                  <div class="card-columns" >
                    <div class="card" style="border: none; text-align: justify;">
                      <div class="card-body">
                        <h5 class="card-title">First Name:</h5><br>
                        <h5 class="card-title">Last Name:</h5><br>
                        <h5 class="card-title">Email ID:</h5><br>

                      </div>
                    </div>
                    <div class="card" style="border: none;">
                      <div class="card-body" style="float: left; text-align: left;" >
                        <h5 class="card-title">{{product.data().firstname}}</h5><br>
                        <h5 class="card-title">Mobility</h5><br>
                        <h5 class="card-title">{{currentUser.email}}</h5><br>

                      </div>
                    </div>
                  </div>

            </div>
            </div>
        </div>

        </div>

      </div>


</section>


 </template>
 <script>

import Avatar from 'vue-avatar-component'
import database from '@/database'
import firebase from 'firebase/app'


export default {
  name: 'Profile',

computed:{
currentUser (){

  return this.$store.state.currentUser
}
},

components: { 

Avatar

 },
 data () {

    return {

      profileData:{
        email:null,
        firstname:null,
        lastname:null,
        secondaryEmail:null,
        businessName:null
       }
    }


},

methods:{

readData(){

      const firestore = database.firestore();
   firestore.collection('users').doc(firebase.auth().currentUser.uid).
  onSnapshot(function(doc){

        console.log('current data:', doc.data())

          var newData = doc.data()

        this.profileData.push(newData)

      })

 }

}





   }
   </script>

main.js代码:

main.js code:

我在这里我具有当前用户的用户authstatechanges.

here i am i have user authstatechanges of current user.

import Vue from 'vue'
import App from './App.vue'

 import router from './router';

 import 'bootstrap';

import'bootstrap/dist/css/bootstrap.min.css';导入'./assets/styles//base-style.css';

import 'bootstrap/dist/css/bootstrap.min.css'; import './assets/styles//base-style.css';

import store from '@/store'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

Vue.config.productionTip = false


let app

const initialize = () => {

if (!app) {

app = new Vue({
el: '#app',
router,
store,
render: h => h(App),


 })
}

}

 firebase.auth().onAuthStateChanged(user => {

 if(user) {

 store.commit('setCurrentUser', user)
 } else {
 store.commit('setCurrentUser', null)
 }

 initialize()

 })

控制台输出:

从Firebase数据库加载页面时如何获取数据.任何帮助，请多多关照..

How to get data when page loading from firebase database. any help much appreicated pls..

推荐答案

有很多事情需要调整，

1. 而不是使用方法来获取数据，而是尝试将代码添加到生命周期挂钩方法，该方法将在将数据安装到dom之前触发，更准确地说，请使用创建的生命周期挂钩 https://vuejsexamples.net/vuejs-created/

然后使用从vuex存储中获取的 currentUser 将数据填充到模板中，返回this.$ store.state.currentUser ，但是在firebase函数中，您将获取的数据设置为模板中未使用的 profileData 数据属性..

Then you are populating the data to the template using currentUser which is taken from the vuex store, return this.$store.state.currentUser, but in your firebase function you are setting the data you fetch to a data property which is profileData which is not used in the template.

您要推送到 profileData ，但是它不是一个数组，它是一个对象，您不能推送到一个对象.

You are pushing to profileData, but it's not an array it is a object and you cant push to an object.

更好的流程是，使用 created 生命周期挂钩获取数据，然后要么

So better flow is, fetch data using created lifecycle hook, then either

1. 将接收到的数据存储(变异)到 store.state.currentUser 中，然后可能会起作用.

1. store(mutate) the received data to the store.state.currentUser then it might work.

否则将更新 profileData 并将模板替换为 profileData 而不是 currentUser

else update the profileData and replace the template with profileData instead of currentUser

尝试一下，

1. 创建一个 created 生命周期挂钩并将firebase代码移至该挂钩.并将profileData对象分配给获取的数据.

1. Create a created lifecycle hook and move the firebase code to that. and assign the profileData object to the fetched Data.

    created() {
      const firestore = database.firestore();
      firestore.collection('users').doc(firebase.auth().currentUser.uid).
              onSnapshot(function(doc){

                    console.log('current data:', doc.data())

                      var newData = doc.data()

                    this.profileData = newData;

                  })
            }

1. 然后将模板中的 currentUser 替换为 profileData .

ex:< h6 style ="color:grey;"> {{profileData.email}}</h6>< br>< br>

这篇关于使用vuejs加载页面时如何从Firebase获取数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！