Nuxt/Vue

【Nuxt/TypeScript】TypeScriptで学ぶNuxt.jsのasyncDataの使い方

asyncDataとは

asyncDataは、Nuxt.jsにおいて、サーバーサイドで実行されるデータの取得に使用されるメソッドです。

この記事では、TypeScriptでNuxt.jsのasyncDataを使用する方法を説明します。

asyncDataの型定義

asyncDataメソッドは、NuxtContextインスタンスを引数に受け取り、Promiseを返します。

NuxtContextには、

  • params
  • vquery
  • redirect
  • error
  • req
  • res

などのプロパティが含まれています。

以下のように、asyncDataメソッドの型定義を行うことができます

import { Context } from '@nuxt/types'

export default {
  async asyncData({ params, query, redirect, error, route, req, res }: Context) {
    // ...
  }
}

asyncDataでデータを取得する

asyncDataを使用して、サーバーサイドでデータを取得するときには、axiosやfetchなどのHTTPクライアントを使用することができます。

以下は、axiosを使用して、GitHub APIからユーザー情報を取得する例です。

import { Context } from '@nuxt/types'
import axios from 'axios'

interface User {
  login: string
  name: string
}

export default {
  async asyncData({ params }: Context) {
    const { data } = await axios.get<User>(`https://api.github.com/users/${params.username}`)
    return { user: data }
  }
}


上記の例では、GitHub APIから取得したユーザー情報をuserプロパティとして返しています。

asyncDataでコンポーネントにデータを渡す

asyncDataで取得したデータは、コンポーネントのdataプロパティに代入することで、

コンポーネント内で使用することができます。

import { Component, Vue } from 'nuxt-property-decorator'

interface User {
  login: string
  name: string
}

@Component
export default class UserComponent extends Vue {
  user: User | null = null

  async asyncData({ params }: any) {
    const { data } = await axios.get<User>(`https://api.github.com/users/${params.username}`)
    return { user: data }
  }
}

取得したユーザー情報をuserプロパティに代入しています。

コンポーネントのテンプレートでは、以下のようにuserプロパティを使用して、ユーザー情報を表示することができます。

<template>
  <div>
    <h1>{{ user?.name }}</h1>
    <p>{{user?.login }}</p>
  </div> 
</template>

user?.nameおよびuser?.loginを使用して、取得したユーザー情報の名前とログイン名を表示しています。

また、userプロパティがnullの場合に備えて、オプショナルチェーン演算子を使用しています。

以上が、TypeScriptでNuxt.jsのasyncDataを使用する方法の例です。

asyncDataを使用することで、サーバーサイドでデータを取得し、コンポーネントに渡すことができます。

また、TypeScriptを使用することで、コードの型安全性を高めることができます。

-Nuxt/Vue