Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?
@shiro_kzy

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

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

  1. vueファイルで使う
  2. TypeScriptで使う
  3. 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What is going on with this article?