Firebase veri yüklemeyi bitirene kadar bekleyin (vue) / 'await' çalışmıyor
Vue uygulamamda, -hook'ta firebase'den bazı veriler created
alıyorum. Verinin yüklenmesi bittikten sonra kodun çalıştırılmasını istiyorum. Ama çalıştıramıyorum.
İşte kodum:
<template>
<div>
<h1>Test 2</h1>
</div>
</template>
<script>
import { institutesCollection } from '../firebase';
export default {
name: 'Test2',
data() {
return {
settings: null,
}
},
async created() {
await institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(
await function(doc) {
this.settings = doc.data();
console.log(this.settings);
}
)
console.log('Done with fetching Data');
console.log(this.settings)
},
methods: {
}
}
</script>
Ancak önce konsol 'Done with fetching Data'
görüntülenir, sonra null
(çünkü this.settings
hala null
) ve bundan sonra Objekt settings
yazdırılır. Ama orada çalışmak için orada this.settings
tanımlanmam gerekiyor (ve null
artık değil).
Şimdiye kadar denediğim şey:
- Koymak bekliyor
- Yüklenen bir
parameter
- Kodu daha sonra bir
then()
Hiçbir şey çalışmadı.
Yanıtlar
onSnapshot()Yöntem, bir asenkron bir yöntem değildir. Dokümanda açıklandığı gibi, " DocumentSnapshot
olaylar için bir dinleyici ekler ".
Bu nedenle, Firestore belgesine sürekli bir dinleyici ayarlamak istiyorsanız, onu kullanmalısınız : belgede bir şey değişirse (örneğin, bir alan yeni bir değer alırsa) dinleyici tetiklenecektir. "Sağladığınız geri arama kullanarak bir başlangıç çağrı tek belgenin geçerli içeriğiyle hemen belge anlık yaratan" Not (bkz doc ).
Firestore belge verilerini yalnızca aşağıdaki gibi ilettiğiniz geri arama işlevinde alırsınız onSnapshot()
:
created() {
institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(doc => {
this.settings = doc.data();
console.log(this.settings);
});
}
Nilesh Patel'in bahsettiği gibi, bu geri aramada kullanmak için bir ok işlevi kullanmanız gerektiğinithis unutmayın . Ayrıca, created
işlevin zaman uyumsuz olmasına gerek YOKTUR .
Son olarak, onSnapshot()
Vue.js bileşenini yok ettiğinizde döndürülen abonelikten çıkma işlevini çağırmanın iyi bir uygulama olduğunu unutmayın . beforeDestroy
Kancayı aşağıdaki şekilde kullanın :
// ...
data() {
return {
settings: null,
firestoreListener: null
}
},
created() {
this.firestoreListener = institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(doc => {
this.settings = doc.data();
console.log(this.settings);
});
},
beforeDestroy() {
if (this.firestoreListener) {
this.firestoreListener();
}
},
Öte yandan, belge verilerini YALNIZCA BİR KEZ oluşturulan Vue.js kancasında okumak istiyorsanız , get()yöntemi aşağıdaki gibi kullanmalısınız :
async created() {
const doc = await institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').get();
if (doc.exists) {
this.settings = doc.data();
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}
Unutmayın ki, bu durumda, GEREKENcreated
işlevi asenkron olduğundan , olması gerekir .async
get()
Bu SO cevabındakiget()
ve onSnapshot()
arasındaki fark hakkında daha fazla ayrıntı .
ok işlevini kullanmayı deneyin
async created() {
await institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(
doc => {
this.settings = doc.data();
console.log(this.settings);
}
)
console.log('Done with fetching Data');
console.log(this.settings)
},