Firebaseがデータの読み込みを完了するまで待つ(vue)/ 'await'が機能しない

3
Sumny 2021-01-11 07:40.

私のvueアプリでは、created-hookのfirebaseからいくつかのデータをフェッチしています。データの読み込みが完了した後、後でコードを実行したいと思います。しかし、私はそれを機能させることはできません。

これが私のコードです:

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

ただし、コンソールの1つは、最初'Done with fetching Data'に表示され、次にnullthis.settingsまだ表示されているためnull)、その後にのみオブジェクトsettingsが印刷されます。しかし、そこで作業するには、そこでthis.settings定義する必要があります(nullもう定義する必要はありません)。

私がこれまでに試したこと:

  1. 入れて待つ
  2. ロードされたものを追加する parameter
  3. 後でコードを追加する then()

何も機能しませんでした。

2 answers

3
Renaud Tarnec 2021-01-11 07:56.

このonSnapshot()メソッドは非同期メソッドではありません。ドキュメントで説明されているように、「DocumentSnapshotイベントのリスナーをアタッチします」。

したがって、Firestoreドキュメントに継続的なリスナー設定する場合は、これを使用する必要があります。ドキュメント内で何かが変更された場合(たとえば、フィールドが新しい値を取得した場合)、リスナーがトリガーされます。「指定したコールバックを使用した最初の呼び出しで、単一のドキュメントの現在のコンテンツを含むドキュメントスナップショットがすぐに作成される」ことに注意してください(ドキュメントを参照)。

次のように、Firestoreドキュメントデータは、渡すコールバック関数でのみ取得さonSnapshot()れます。

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

Nilesh Patelが述べたように、このコールバックで使用するには、矢印関数を使用する必要がthisあることに注意してください。また、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フックに、あなたが使うべきget()方法を、次のように:

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


このSO回答のget()との違いの詳細。onSnapshot()

1
Nilesh Patel 2021-01-11 07:46.

矢印機能を使ってみてください

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

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

科学者は髪が灰色になる理由の別の可能な説明を見つけます

科学者は髪が灰色になる理由の別の可能な説明を見つけます

このネズミのグリズリした毛皮は、いつか人々が白斑と呼ばれるまれな状態を発症する理由を説明するのに役立つかもしれません。科学者たちは、白斑と呼ばれるまれな汚名を着せられた状態である無着色の皮膚の斑点に悩まされる人もいれば、髪が灰色になる理由を説明できる新たに発見されたメカニズムに遭遇したと考えています。

新しい若いテロリストコレクションの内部のこの外観で、神秘的で残忍な陰謀に飛び込む

新しい若いテロリストコレクションの内部のこの外観で、神秘的で残忍な陰謀に飛び込む

若いテロリストの野生のアンチヒーロー、セラに会いましょう。ほぼ3年前、Black Mask Studiosは、残忍で政治的な色合いのスリラーであるYoungTerroristsと波を起こしました。

Huluが周りを見回し、The Handmaid'sTaleを第3シーズンに更新します

Huluが周りを見回し、The Handmaid'sTaleを第3シーズンに更新します

ハンドメイドの物語のエリザベスモス昨夜、アイオワ上院は、胎児の心拍が検出された後、ほとんどの妊娠中絶を禁止する、いわゆる「心拍」法案を早急に追跡しました。妊娠。また、HuluはThe Handmaid'sTaleを第3シーズンに更新することを決定しました。

ラストコール:どのように風邪と戦うのですか?

ラストコール:どのように風邪と戦うのですか?

これは実際に機能しますか?病気になってから久しぶりですが(ジンクス!)、今朝目が覚めたとき、副鼻腔の奥にひどい痛みを感じ、病気になりそうです。風邪が嫌いです。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

ケイト・ミドルトンはロンドンの水辺で一日を過ごし、さらにジェニファー・ロペス、ジュリアン・ハフなど

ケイト・ミドルトンはロンドンの水辺で一日を過ごし、さらにジェニファー・ロペス、ジュリアン・ハフなど

ケイト・ミドルトンはロンドンの水辺で 1 日を過ごし、ジェニファー・ロペス、ジュリアン・ハフなども。ハリウッドからニューヨークまで、そしてその間のあらゆる場所で、お気に入りのスターの活躍をご覧ください!

ウィスコンシン川でのナイフ攻撃で 17 歳の少年が刺されて死亡、他の 4 人が負傷したままになっている

ウィスコンシン川でのナイフ攻撃で 17 歳の少年が刺されて死亡、他の 4 人が負傷したままになっている

捜査官は、グループと容疑者が攻撃の前にお互いを知っていたかどうかを調べています

実際に変換するコンテンツ戦略を作成することを想像してみてください。それが可能だ。

実際に変換するコンテンツ戦略を作成することを想像してみてください。それが可能だ。

2021 年には、サービスを提供する顧客と顧客に伝えるストーリーについて知っていることをすべて再考することをお勧めします。あとずさりする。

マンモスロスは私の心を愛に開いた

マンモスロスは私の心を愛に開いた

フェリックス ザ キャットの 9 歳の誕生日の日に、大人になってからの最大の損失の 1 つである 2013 年のソフィーを思い出します。私はこのエッセイを書き、2013 年にこのプラットフォームで簡単に共有しました。

あなたがインターネットがあなたに望んでいる人になれないとき

あなたがインターネットがあなたに望んでいる人になれないとき

私は「列車事故」という言葉が嫌いです。人々は自分自身の道徳的羅針盤に安らぎを覚え、そうすることで自分自身が判断を下していることに気づきます。

DFINITY ブロックチェーンの分散型クラウド ビジョン

編集者注: アーカイブ目的で保存されている DFINITY ブログの古い資料を表示しています。

DFINITY ブロックチェーンの分散型クラウド ビジョン

この投稿では、DFINITY チームの分散型クラウドのビジョンと、それが従来のブロックチェーンやアマゾン ウェブ サービスなどの既存のクラウド プロバイダーとどのように関連しているかを探ります。大規模なネットワークによって適用される DFINITY テクノロジのデモンストレーションが 2017 年の秋に行われ、その後、非営利財団を支援するための主要な資金調達が行われ、「オープン クラウド」ネットワークは 2018 年の初夏に開始される予定です。 .

Language