Vue3 타입스크립트 axios api 테스트 (pinia 사용)

api 테스트 사이트 : https://reqres.in

GET >

import axios from 'axios'
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const userInfoStore = defineStore('userInfo', () => {
    interface userForm {
        'id':number;
        'email' : string;
        'first_name' : string;
    }
  //interface 로 타입정의를 해주어야한다
  
    const API_URL = "https://reqres.in/api/users?page=2"

    const usersInfo = ref([] as userForm[])
    const getUserData = () => {
        axios({
            method: "get",
            url: API_URL,
        })
        .then((response) => {
            console.log(response.data.data)
            usersInfo.value = response.data.data
        })
        .catch((err) => {
            console.log(err)
        })
    }

    return {getUserData, usersInfo}
})

<div>
<button @click="getUser">유저 데이터 가져오기</button>
	<div v-for="user in usersInfo" :key="user.id">
    <p>ID : {{ user.id }}</p>
    <p> 유저이메일 : {{ user.email }}</p>
    <p> 유저 네임 : {{ user.first_name }}</p>
    <hr>
	</div>
</div>