Question

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

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

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

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

这是我的代码：

<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代码：

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

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

您需要调整很多事情，

而不是使用方法来获取数据，而是尝试将代码添加到生命周期挂钩方法，该方法将在将数据安装到dom之前触发，更准确地说，请使用created生命周期挂钩 https://vuejsexamples.net/vuejs-created/
然后使用currentUser将数据填充到模板中，该数据取自vuex存储， return this.$store.state.currentUser，但是在您的firebase函数中，您将获取的数据设置为profileData的数据属性，该属性未在模板中使用。
您要推送到profileData，但是它不是一个数组，它是一个对象，您不能推送到一个对象。

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



将接收到的数据存储（变异）到store.state.currentUser，然后它可能会起作用。



否则更新profileData并用profileData而不是currentUser

替换模板

尝试一下，

创建一个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;

                  })
            }

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

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

使用vuejs加载页面时如何从Firebase获取数据？

1 个答案: