파이어베이스에서 데이터 로드가 완료될 때까지 대기(vue)/'대기'가 작동하지 않음

파이어베이스에서 데이터 로드가 완료될 때까지 대기(vue)/'대기'가 작동하지 않음

vue 앱에서 방화벽 기반에서 데이터를 가져오고 있습니다.created- 훅. 데이터 로딩이 끝나면 나중에 코드를 내보내고 싶다.하지만 난 그걸 할 수 없어.

코드는 다음과 같습니다.

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

하지만 콘솔 하나, 먼저'Done with fetching Data'이 표시됩니다.null(왜냐하면this.settings정지해 있다null그리고 그 후에야 오브젝트는settings인쇄되어 있습니다.하지만 나는 필요하다this.settings거기서 정의되다(그리고 아니다)null더 이상)와 함께 일할 수 없습니다.

지금까지 시도했던 것:

1. 투입 대기
2. 로드된 추가parameter
3. 나중에 코드 추가then()

아무것도 안 먹혔어.

메서드가 비동기 메서드가 아닙니다.이 문서에서 설명한 바와 같이, "청취자를 연결시켜줍니다.DocumentSnapshot이벤트」를 참조해 주세요.

따라서 Firestore 문서에 연속 수신기를 설정하려면 이 수신기를 사용해야 합니다. 문서에서 변경 사항이 있을 경우(예: 필드가 새 값을 얻는 경우) 수신기가 트리거됩니다."제공한 콜백을 사용한 초기 호출은 단일 문서의 현재 내용을 포함하는 문서 스냅샷을 즉시 작성합니다"(문서 참조).

Firestore 문서 데이터는 전달된 콜백 함수에서만 얻을 수 있습니다.onSnapshot()다음과 같습니다.

created() {
    institutesCollection.doc('FbdYJ5FzQ0QVcQEk1KOU').onSnapshot(doc => {
           this.settings = doc.data();
           console.log(this.settings);
      });
}

Nilesh Patel이 설명한 바와 같이 이 콜백에서 사용하려면 화살표 함수를 사용해야 합니다.또,created함수는 비동기일 필요는 없습니다.

마지막으로, 에 의해 반환된 서브스크라이브 해제 함수를 호출하는 것이 좋습니다.onSnapshot()Vue.js 컴포넌트를 파기할 때 사용합니다.를 사용합니다.beforeDestroy다음과 같이 후크합니다.

// ...
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();
  }
},

---

한편 작성된 Vue.js 후크에서 문서 데이터를 한 번만 읽는 경우 다음과 같은 방법을 사용해야 합니다.

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!");
    }
}

이 경우, 이 경우,created기능 필요async,부터get()는 비동기입니다.

---

차이에 대한 자세한 내용은get()그리고.onSnapshot()SO의 답변에 기재되어 있습니다.

화살표 기능을 사용해 보다

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

언급URL : https://stackoverflow.com/questions/65656389/wait-until-firebase-has-finished-loading-data-vue-await-not-working