Vue
Nuxt3の'<script setup>'useFetchを使ってAPIからデータを取得する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
Nuxt3 の<script setup>useFetch を使って API からデータを取得する方法の基本形について調べたので、まとめてみました。
結論
<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/posts`);
const test = () => {
console.log(data.value.posts);
};
</script>このように書くのが基本形みたいです。
const { data } = await useFetch(`${config.baseUrl}/api/posts`)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/posts`);
const test = () => {
console.log(data.value.posts);
};
</script>useFetch か useAsyncData か？
基本的に useFetch でこと足りるだろうというのが、いろんな記事を読んでみた感想です。
なので、この記事では useFetch でやっていますし、基本形はこれでいいと思っていますが、よく分かっていないので、他の方の記事を参照してみてください。
Nuxt3 で個人的に useFetch より useAsyncData を推したい理由
個人的には axios が慣れていて、axios を入れて使っても良いんじゃないかと思っています。
特にバックエンドに Laravel Sanctum を使うような場合、クッキー認証の設定が楽なので axios を使いたくなります。
まとめ
以上 Nuxt3 でデータを取得する基本形について書いてみました。
誰かの参考になれば幸いでございます。
フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。
