【Nuxt.js】TypeScript,asyncDataでnuxtjs/axiosを使う #TypeScript

Nuxt.jsでaxiosを使う際に用途によって使い方が異なるのでそれぞれのやり方をまとめました。

vueファイルで使う
TypeScriptで使う
asyncDataで使う

APIはテスト用のJSONPlaceholderを使います

※今回はaxiosの使い方のみ書いていくのでエラーハンドリングは省略しております

1.vueで$axiosを使う

プロジェクト立ち上げ時にaxiosを導入している場合はインストールとconfigファイルへの記述は不要です

npm

$ npm install @nuxtjs/axios

yarn

$ yarn add @nuxtjs/axios

nuxt.config.js

export default {
  modules: ['@nuxtjs/axios']
}

これでNuxt.jsのvueファイルでthis.$axiosが使えるようになります

index.vue

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  async created(){
    const ALBUM_API = "https://jsonplaceholder.typicode.com/albums"
    const albums = await this.$axios.$get(ALBUM_API)
    console.log("createdでALBUM_APIをGET:",albums);
  }
})
</script>

TypeScriptで$axiosを使う

こちらの設定もプロジェクト作成時にaxiosを入れていればconfigファイルに設定が既に書いてあるはずです。

tsconfig.json

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  }
}

ここからtsファイルで使用するためにaxiosの設定ファイルを作成しPlaginsで読み込んで使います

@nuxtjs/axiosをplaginsで使用するためにexportする

utils/api.ts

import { NuxtAxiosInstance } from '@nuxtjs/axios'

let $axios: NuxtAxiosInstance

export function initializeAxios(axiosInstance: NuxtAxiosInstance) {
  $axios = axiosInstance
}

export { $axios }

plaginsで$axiosを読み込んでTSファイルで汎用的に使えるようにする

plugins/axios-accessor.ts

import { Plugin } from '@nuxt/types';
import { initializeAxios } from '~/utils/api';

export const accessor: Plugin = ({ $axios }): void => {
  initializeAxios($axios);
};

export default accessor;

nuxt.config.jsでplaginsの設定を反映する

nuxt.config.js

  plugins: [
    '@/plugins/axios-accessor',
  ]

TSファイルで$axiosをインポートして使う

user.ts

import { $axios } from "./utils/api"

export const getUser = async () => {
  const USER_API = "https://jsonplaceholder.typicode.com/users"

  const users = await $axios.$get(USER_API)

  return users
}

index.vueで読み込んだ関数を実行

index.vue

<script lang="ts">
import Vue from 'vue'
import { getUser } from "@/user"

export default Vue.extend({
  async created(){
    const users = await getUser()
    console.log("createdでTSファイルのUSER_APIをGET:",users);
  }
})
</script>

asyncDataで$axiosを使う

asyncDataはvueインスタンスが生成される前に実行されるのでthisが使えません。
ですが、引数でcontextを受け取れるのでそれを使って$axiosを使うことができます。

詳しくは公式に図解で詳しく載っているのでこちらがわかりやすいです。
コンテキストとヘルパー

index.vue

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data(){
    return{
      posts:[],
    }
  },
//引数でcontextの中のappを分割代入で受け取る
  async asyncData({ app }){
    const POST_API = "https://jsonplaceholder.typicode.com/posts"
    const posts = await app.$axios.$get(POST_API)
    console.log("asyncDataでPOST_APIをGET",posts);

  return { posts }
  },
})
</script>

asyncDataでreturnした変数はdataプロパティと同名であればそこにセットされます。
画面の初期データの表示などに使えますね！

参考

nuxt/axios
Nuxt TypeScript
Nuxt