How to get data from firebase when page loading using vuejs?

问题

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

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

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.

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

here is my code:

<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 code:

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'; 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()

 })

console output:

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

回答1:

There are number of things you have to adjust,

1. instead of fetching data using a method, try to add the code to a life cycle hook method, which will fire before you mount the data to dom, more precisely saying, use created lifecycle hook https://vuejsexamples.net/vuejs-created/

2. 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.

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

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

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

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

Try this one,

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;

                  })
            }

2. Then replace the currentUser in template to profileData.

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

来源：https://stackoverflow.com/questions/56034086/how-to-get-data-from-firebase-when-page-loading-using-vuejs