vue.js でfirebaseのデータの取得結果から、別の配列に格納したいが、配列にアクセスできない？

Question

すみません。
最近、vue.js(nuxt.js)を始めたものです。

vue.jsのfirestore　　のデータの扱いについて

質問がございます。
どなたかおわかりになる方、お答えいただけると嬉しいです。

↓↓↓↓↓↓

[やりたいこと]
firestoreのDBから取得データを配列に格納して使いまわしたい。

※補足
このdb(firestore)から取得した値はpromiseの処理のようです。
thenのなかで、配列に入れたdataをthenの外でも使いまわしたい。

あるいは、これとは、別に、promiseじゃない方法で、取得する方法を知りたい。

[問題概要]
firestoreから取得したデータが配列に格納できる。
おそらくデータは取得できているが、
data[(要素数)]の形で配列にアクセスできない。

[環境]
vue.js 2.6.14
firebase 8.2.3

[コード]
firestoreデータ取得をget.thenにてデータを取得
thenの中で取得したデータをループして、
その中で、宣言したdata配列に格納する。

　↓

<script> import firebase from '@/plugins/firebase'; import Export from "../components/util/export"; //外部ファイル呼び出しテスト export default { name: "App", mounted() { this.db = firebase.firestore() data = [] this.userRef = this.db.collection('users') this.userRef .get() .then((querySnapshot) => { querySnapshot.forEach((doc) => { data.push(doc.data()) }) }) console.log(data) //データは取得できている console.log(data[0]) //undifinedになる。 }, }; </script>

[問題の詳細]

firestoreから取得したデータは取得できているが、
data[(要素数)]にアクセスできない。
※画像参照　　　　　　取得した配列。chromeのコンソールにて確認）配列に要素数がない？　
そもそも、data配列へのアクセス方法がわかっていないかもしれません。

[解決した問題]
data[(要素数)]の方法、もしくはそれ以外の方法でデータにアクセスしたい。

すみませんが、何卒、宜しくお願い致します。

Answer 1

下記のようにasync/awaitを使ってみてはいかがでしょうか。

（略）
  async mounted() {

    this.db = firebase.firestore()

    data = []

    this.userRef = this.db.collection('users')

    const querySnapshot = await this.userRef.get()

    querySnapshot.forEach((doc) => {
      data.push(doc.data())
    })
    // 以下、dataを使用した処理を書く。
    console.log(data)
    console.log(data[0])
  }
（以下略）

Comments

[MataSema]

ありがとうございます！！

いただいたサンプルのasync/awaitで無事データが取得できました。
jsの非同期の処理がちゃんとできていないなと我ながら実感しました。