はじめに

こんにちは、長期インターン生のRyutoです！

今回は、Nuxt3におけるデータの加工・更新の方法について、コード例を交えて紹介します。

データの加工

transformオプション

transformはuseFetchのオプションのひとつで、取得したデータを加工して返す際に使います！

コード例

下記のコードでは、記事一覧を取得し、技術カテゴリの記事のみを絞り込んで返しています。

const { data } = await useFetch('/api/contents', {
  transform: data => data.filter(content => content.category === 'technology')
})

複数のエンドポイント

複数のエンドポイントからデータを取得し、それらを加工して返したい場合には、useAsyncDataを用いて記述することが出来ます！

コード例

下記のコードでは、記事一覧とカテゴリ一覧を同時に取得しています。

そして、各記事のカテゴリIDに一致するカテゴリ名をカテゴリ一覧から代入しています。

const { data } = await useAsyncData(async () => {
  const [contents, categories] = await Promise.all([
    $fetch('/api/contents'),
    $fetch('/api/categories')
  ])
  contents.forEach((content) => {
    content.categoryName = categories.find(category => category.id === content.categoryId).name
  })
  return contents
})

データの更新

queryオプション

queryはuseFetchのオプションのひとつで、データ取得時のクエリを設定する際に使います！

また、queryにリアクティブな値を渡すことで、queryの変更を検知してデータの更新が行われます。

コード例

下記のコードでは、input要素に入力されたカテゴリに一致する記事一覧を取得し、表示しています。

input要素の値が変更されたときには、表示される記事一覧がリアクティブに変わります。

<script setup>
const query = ref({ category: 'technology' })
const { data } = await useFetch('/api/contents', { query })
</script>

<template>
  <input v-model="query.category">
  <ul>
    <li v-for="content in data">
      {{ content }}
    </li>
  </ul>
</template>

refresh関数

refreshはuseFetchが返す関数であり、取得したデータを更新する際に使います！

コード例

下記のコードでは、記事一覧を取得して表示しています。

また、フォームから新しい記事を追加することが出来ます。

新しい記事が追加されたときには、refreshを行って表示する記事一覧を更新しています。

<script setup>
const { data, refresh } = await useFetch('/api/contents')
const form = ref({ text: '' })
const addContent = async () => {
  await useFetch('/api/contents', {
    method: 'POST',
    body: form
  })
  await refresh()
} 
</script>

<template>
  <ul>
    <li v-for="content in data">
      {{ content }}
    </li>
  </ul>
  <form @submit.prevent="addContent()">
    <textarea v-model="form.text" />
    <button>
      追加
    </button>
  </form>
</template>

まとめ

今回は、Nuxt3におけるデータの加工・更新の方法について紹介しました。

ここで紹介したオプションや関数はほんの一部ですが、参考になれば幸いです。

参考

• Data Fetching
• useFetch
• useAsyncData