Как получить данные из firebase при загрузке страницы с помощью vuejs?

Question

Я пытался получить текущие пользовательские данные из firebase для отображения деталей на странице профиля.

Здесь я пытаюсь получить данные из магазина, при загрузке страницы.Структура моей таблицы: users => UID текущего пользователя => email, имя, фамилия, имя компании и т. Д.

Я добавил функциональность для получения данных из firebase при загрузке страницы профиля, но не работает.ошибка, отображаемая в консоли product.data (). firstname не является функцией.

И также я не получил никаких данных о базе данных вывода консоли или нет?

вот мой код:

<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 код:

здесь у меня есть авторизация пользователя текущего пользователя.

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

 })

консольный вывод:

Как получить данные при загрузке страницыиз базы данных Firebase.любая помощь очень ценится пожалуйста.

Answer 1

Есть ряд вещей, которые вы должны настроить,

1. вместо того, чтобы извлекать данные с помощью метода, попробуйте добавить код в метод ловушки жизненного цикла, который сработает, прежде чем монтировать данные в dom, точнее говоря, использовать created ловушку жизненного цикла https://vuejsexamples.net/vuejs-created/

2. Затем вы заполняете данные в шаблон, используя currentUser, который берется из хранилища vuex, return this.$store.state.currentUser, но в функции firebase вы устанавливаете данные, которые вы выбираете, для свойства данных, которое profileData не используется в шаблоне.

3. Вы нажимаете на profileData, но это не массив, это объект, и вы не можете нажать на объект.

Так что лучший поток - это выборка данных с использованием created ловушки жизненного цикла, а затем либо

1. сохранить (преобразовать) полученные данные в store.state.currentUser, после чего они могут работать.

2. иначе обновите profileData и замените шаблон на profileData вместо currentUser

Попробуйте это,

1. Создайте created ловушку жизненного цикла и переместите туда код Firebase. и назначить объект profileData для извлеченных данных.

    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. Затем замените currentUser в шаблоне на profileData.

например: <h6 style="color:grey;">{{profileData.email}}</h6><br><br>