Firebase veri yüklemeyi bitirene kadar bekleyin (vue) / 'await' çalışmıyor

Jan 11 2021

Vue uygulamamda, -hook'ta firebase'den bazı veriler createdalı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.settingshala null) ve bundan sonra Objekt settingsyazdırılır. Ama orada çalışmak için orada this.settingstanımlanmam gerekiyor (ve nullartık değil).

Şimdiye kadar denediğim şey:

  1. Koymak bekliyor
  2. Yüklenen bir parameter
  3. Kodu daha sonra bir then()

Hiçbir şey çalışmadı.

Yanıtlar

3 RenaudTarnec Jan 11 2021 at 00:56

onSnapshot()Yöntem, bir asenkron bir yöntem değildir. Dokümanda açıklandığı gibi, " DocumentSnapshotolaylar 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, creatediş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 . beforeDestroyKancayı 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 .asyncget()


Bu SO cevabındakiget() ve onSnapshot()arasındaki fark hakkında daha fazla ayrıntı .

1 NileshPatel Jan 11 2021 at 00:46

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)
  },