Nuxt.js components配下のコンポーネントでデーターを取得

共通コンポーネントでデータを取得して表示したい

共通コンポーネントでデータを取得したいので下記のように実装

/pages/sample_page.vue

<template>
    <Sample/>
</template>

/components/sample.vue

<template>
  <div>
    <b>{{data.data1}}</b><br>
    <b>{{data.data2}}</b>
  </div>
</template>
<script>
export default {
  async asyncData(context) {
    const data = await context.$axios.$get('http://localhost:3000/nuxt_test.json')
    return { data }
  }
}
</script>

/static/nuxt_test.json

{
    "data1":"データ1",
    "data2":"データ2"
}

http://localhost:3000/sample_page

エラーが発生しました。
原因はasyncDataがpages配下以外のコンポーネントが使えないから。

公式だと↓のページで詳しく説明されてました。
nuxtjs.org

このページには解決方法も記載されれていて、fetchフックを使えば解決できると記載されていました。

fetchフックの使い方を公式ページで調べると↓のページのサンプルがドンピシャでした。
nuxtjs.org

このページを参考にコンポーネントを修正しました。

/components/sample.vue

<template>
  <div>
    <b>{{data.data1}}</b><br>
    <b>{{data.data2}}</b>
  </div>
</template>
<script>
export default {data() {
      return {
        data: {}
      }
    },
    async fetch() {
      this.data = await fetch(
        'http://localhost:3000/nuxt_test.json'
      ).then(res => res.json())
    }
}
</script>

http://localhost:3000/sample_page

components配下のコンポーネントでデーターを取得して表示することができました。