VueからNuxtへの移行ガイド 第2弾【データフェッチ編】

<script setup>
const route = useRoute()
const post = ref(null)
const loading = ref(true)
const error = ref(null)

onMounted(async () => {
  try {
    const response = await fetch(`https://api.example.com/posts/${route.params.id}`)
    if (!response.ok) {
      throw new Error('記事の取得に失敗しました。')
    }
    post.value = await response.json()
  } catch (e) {
    error.value = e
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div v-if="loading">読み込み中...</div>
  <div v-else-if="error" class="error">{{ error.message }}</div>
  <article v-else-if="post">
    <h1>{{ post.title }}</h1>
  </article>
</template>

<script setup lang="ts">
type Post = { id: number; title: string; body: string }
const route = useRoute()

const { data: post, pending, error, refresh } = await useFetch<Post>(
  () => `https://api.example.com/posts/${route.params.id}`,
  {
    // 初期形で null チェックを回避
    default: () => ({ id: 0, title: '', body: '' }),
    // 必要に応じてキーを明示（キャッシュ制御）
    key: () => `post:${route.params.id}`,
    // 取得後に形を整える
    transform: (raw) => ({ ...raw, title: raw.title?.trim() }),
    // 追加のクエリやヘッダは $fetch オプションとして渡せる
    query: { expand: 'author' },
    headers: { Accept: 'application/json' }
  }
)
</script>

<template>
  <button @click="refresh">更新</button>
  <div v-if="pending">読み込み中...</div>
  <div v-else-if="error" class="error">記事の取得に失敗しました。</div>
  <article v-else>
    <h1>{{ post.title }}</h1>
    <p>{{ post.body }}</p>
  </article>
  
</template>

const route = useRoute()
const { data, pending } = await useFetch(() =>
  `/api/posts/${route.params.id}`
)
// 依存（route.params.id）が変わると自動で再フェッチされる

// SSRでは取得せず、クライアントでのみ実行
useFetch('/api/me', { server: false })

// SSRをブロックせず、初回はクライアントで取得（ローディング表示を優先）
useFetch('/api/feed', { lazy: true })

<script setup lang="ts">
import { cms } from '~/lib/cms' // 例: Headless CMS SDK
type Article = { id: string; title: string; body: string }
type Comment = { id: string; body: string }

const route = useRoute()
const key = computed(() => `article:${route.params.id}`)

const { data: articleData, pending, error, refresh } = await useAsyncData(
  key,
  async () => {
    const [article, comments] = await Promise.all<[
      Article,
      Comment[]
    ]>([
      cms.getArticle(String(route.params.id)),
      $fetch(`/api/articles/${route.params.id}/comments`)
    ])
    return { article, comments }
  },
  {
    default: () => ({ article: null as Article | null, comments: [] as Comment[] }),
    // 依存が変化したら自動再実行（URL関数と同等の挙動）
    watch: [() => route.params.id],
    // クライアント限定で取得したい場合は server:false
    // server: false,
    // 必要なら返却形を整形
    transform: (d) => ({ ...d, article: d.article && { ...d.article, title: d.article.title.trim() } }),
    // 一部のみを追跡・直列化してペイロード削減
    pick: ['article', 'comments']
  }
)
</script>

const user = ref(null)
onMounted(async () => {
  const res = await fetch('/api/user')
  const data = await res.json()
  user.value = data.profile // ネストしたオブジェクトから取得
})

const { data: user } = await useFetch('/api/user', {
  transform: (data) => data.profile // transformでデータを整形
})

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const profile = ref(null)

  function setProfile(newProfile) {
    profile.value = newProfile
  }

  async function fetchProfile() {
    // ストア内ではuseFetch/useAsyncDataを直接使う
    const { data } = await useFetch('/api/profile')
    if (data.value) {
      setProfile(data.value)
    }
  }

  return { profile, fetchProfile }
})

<script setup>
import { useUserStore } from '~/stores/user'
const userStore = useUserStore()

// サーバーサイドでデータを取得し、ストアにセットする
await userStore.fetchProfile()
</script>