【Nuxt.js】axiosで取得したはずのデータが使用できないときの対処法

Nuxt.jsにて、axiosを使って取得したはずのデータが利用できないときがあります。ケアレスミスなのですが、初心者が引っかかりやすいポイントなので、原因と対処法をメモしておきます。

原因→awaitのつけわすれ

Nuxt.jsの$axiosはPromise（非同期処理）によりデータを取得します。

よって、awaitをつけないと、データの取得が完了する前に次の処理へ行ってしまいます。

<script>
export default {
  async asyncData(context) {
    let buses = await context.$axios.$get("/posts");
    console.log(buses);
    return { posts: posts};
  }
};
</script>

awaitをつけることで、データの取得が完了するまで待機してくれるようになります。取得が完了してから次の処理へ移行するため、取得したデータを利用することができます。

取得したはずのデータが利用できない場合（NaNになってしまう場合）は、awaitのつけ忘れがないか確認してみてください。