nuxt-ts day4:axiosでランダム猫画像
2020-12-03
# diary4日目。今日は 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>
今日はここまで。