<template>
  <div>
    <button @click="test">{{ data.weapons }}</button>
  </div>
</template>

<script setup>
  const config = useRuntimeConfig();
  //config.baseUrl = http://127.0.0.1:8000
  const { data } = await useFetch(`${config.baseUrl}/api/weapons`);
  const test = () => {
    console.log(data.value.weapons);
  };
</script>

useFetch か useAsyncData か？

基本的に useFetch でこと足りるだろうというのが、いろんな記事を読んでみた感想です。

なので、この記事では useFetch でやっていますし、基本形はこれでいいと思います。

data の参照に value が必要だった

<script setup></script>

の中で fetch した data の中を参照しようとするときは、

data.value が必要になった。

<script setup>
  const config = useRuntimeConfig();
  //config.baseUrl = http://127.0.0.1:8000
  const { data } = await useFetch(`${config.baseUrl}/api/weapons`);
  const test = () => {
    console.log(data.value.weapons);
  };
</script>

必要ということはわかったけど、なぜ必要なのかはよく分かっていません。ぱおん。

まとめ

以上、Nuxt3 API からデータを取得する時の参考例を作ってみました。

この書き方で

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは！