Vue.jsでfirebaseのデータを取得する方法

Question

前提・実現したいこと

Vue.jsとFirebaseを利用した開発の練習をしています。

Firebaseからデータ取得し、data内のthis.myListに入れることが目的です。

下のコードに書いてあるように、thenの内と外で、this.myListが取得できるかどうかになぜ違いが出てくるのでしょうか。

どうぞよろしくお願い致します。

該当のソースコード

export default {
  data(){ return {
      myList: []
    }
  },
  methods: {
    fetchMyList(uid) {
      firebase.firestore().collection("users").doc(uid).get().then((doc) => {
        this.myList = doc.data().myList
        console.log("thenの中: " + this.myList) // thenの中ではthis.myListで取り出せる
      })
      console.log("thenの外: " + this.myList) // thenの外ではthis.myListで取り出せない
    },
  },
}

Answer 1

thenの外だからthis.myListが取り出せないのではありません。
thenの外のコードは、thenの中のコードが実行されるより前（つまりthis.myList = doc.data().myListよりも前に）実行されるから取り出せないのです。

Comments

[gymusel]

なるほど…！！勉強不足でした。ありがとうございます。