ホーム > Vue > Nuxt3の<script setup>でAPIからデータを取得する方法【useFetch】
Vue

Nuxt3の<script setup>でAPIからデータを取得する方法【useFetch】

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 結論
  2. useFetch か useAsyncData か？
  3. data の参照に value が必要だった
  4. まとめ
オススメ本

⇨ Vue 記事の目次はこちら

Nuxt3 を触ってみています。

Nuxt3 で

<script setup>

を使って、API からデータを取得する方法の基本形について調べたので、まとめてみました。

環境
node --version v16.13.0
Nuxt3

結論

<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 から頂ければ幸いです。

それでは！