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

Question

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

在这里，我尝试在页面加载时从 firestore 获取数据。我的表结构:users => 当前用户 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代码:

这里我有当前用户的用户身份验证更改。

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

 import router from './router';

 import 'bootstrap';

导入'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

有很多事情你必须调整，

1. 不要使用方法获取数据，而是尝试将代码添加到生命周期钩子(Hook)方法中，该方法将在将数据挂载到 dom 之前触发，更准确地说，使用 created生命周期钩子(Hook) https://vuejsexamples.net/vuejs-created/

2. 然后您将使用 currentUser 将数据填充到模板中这是从 vuex 商店获取的， return this.$store.state.currentUser ，但是在您的 firebase 函数中，您将获取的数据设置为数据属性 profileData模板中未使用它。

3. 您正在插入profileData ，但它不是一个数组，而是一个对象，您无法推送到对象。

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

试试这个，

1. 创建 created生命周期 Hook 并将 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 .

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