我一直在尝试从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';
导入'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数据库加载页面时如何获取数据。任何帮助非常感谢请。
最佳答案
您需要调整很多事情，
而不是使用方法来获取数据，请尝试将代码添加到生命周期挂钩方法，该方法将在将数据安装到dom之前触发，更准确地说，请使用created生命周期挂钩
https://vuejsexamples.net/vuejs-created/
然后，使用从vuex存储中获取的currentUser将数据填充到模板中，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。例如：
<h6 style="color:grey;">{{profileData.email}}</h6><br><br>关于javascript - 使用vuejs加载页面时如何从Firebase获取数据？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56034086/