hukurouo.com 🦉

2020-12-03 :

nuxt-ts day4：axiosでランダム猫画像


4日目。今日は axios をメインにやった。

https://nuxt-ts-sample.netlify.app/axios

ランダムで猫の画像が表示されるページを作りました。

typesディレクトリに型定義を分離

型定義だけを専用のディレクトリで管理してみる。

こんなファイルを作って、

types\user.ts
export interface User {
  firstName: string
  lastName: string
}

任意のコンポーネントで読み込む。

components\User.vue
import { User } from '~/types/user'

これで複数個所で使いまわせるようになりました。見通しも良くなった気がします。

nuxt_config.ts の設定

config ファイルも型定義できるようなのでやってみる。

ここの記述はバージョンアップなどで結構頻繁に変わっているらしい。過去の記事を漁ってると何パターンかあった。

nuxt.config.ts
import { NuxtConfig } from '@nuxt/types'
const nuxtConfig: NuxtConfig = {
  ...
}
module.exports = nuxtConfig

axiosをインストールする

axios でも型を使いたいので色々と設定していきます。

npm install @nuxtjs/axios
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
utils\api.ts
/* eslint-disable import/no-mutable-exports */
import { NuxtAxiosInstance } from '@nuxtjs/axios'

let $axios: NuxtAxiosInstance

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

export { $axios }
nuxt.config.ts
  plugins: [
    '@/plugins/composition-api',
    '@/plugins/axios-accessor'
  ],

これでどこからでも axios が参照できるようになりました。

axiosで猫画像を取得する

https://aws.random.cat/meow

このAPIを呼び出して、猫画像を取得してみます。

pages\axios.vue
<template>
  <div class="justify-center items-center text-center mx-auto">
    <h1>randomCat (axios)</h1>
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" @click="changeCat">
      change 🐱
    </button>
    <br><br>
    <img :src="state.cat_url" alt="">
  </div>
</template>

<script lang="ts">
import { onMounted, defineComponent, reactive } from '@vue/composition-api'
import { $axios } from '~/utils/api'

export default defineComponent({
  setup () {
    const state = reactive({
      cat_url: '' as string
    })
    const asyncFunc = async (): Promise<void> => {
      const CatObj: {file: string} = await $axios.$get('https://aws.random.cat/meow')
      state.cat_url = CatObj.file
    }
    const changeCat = () => { asyncFunc() }

    onMounted(() => { asyncFunc() })

    return {
      state, changeCat
    }
  }
})
</script>

今日はここまで。