[Vue3] Vue3에서 vuex4 store 모듈화(3) API모듈화,axios,actions

axios를 통한 비동기 작업을 알아보려고 한다

 

 

1. api 모듈화를 위해 src 하위에 api폴더를 생성 후 index.js와 팀원들이 각자 사용할 API 파일을 생성

 

 

2. index.js 에서 axios 임포트, baseURL과 headers 설정

 

import axios from 'axios';

function apiInstance() {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_API_BASE_URL,
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
    },
  });
  return instance;
}

export { apiInstance };

 

 

3. baseURL 노출을 피하기 위해 env.local 파일 생성

 

 

4. env.local에 baseURL 설정 (배포 전 로컬 사용중)

VUE_APP_API_BASE_URL=http://localhost:8080/

 

 

5. 본인이 사용할 파일에서 다음과 같은 코드 작성

// src/api/Data1.js

import { apiInstance } from './index.js';
const api = apiInstance();

 

 

이제 설정은 끝!

직접 사용해보자.

 

6. 본인의 파일로 dispatch를 통해 actions 호출

 

<template>

</template>

<script>
import { useStore } from "vuex";
import { onBeforeMount } from "@vue/runtime-core";

export default {
  name: "TestView",
  setup() {
    const store = useStore();
    
    onBeforeMount(() => {
      store.dispatch("Member1/getData"),
    });

};
</script>

<style>

</style>

 

7. 모듈화된 store 파일에서 호출될 함수 정의

 

// src/store/modules/Member1.js

const Member1 = {
  namespaced: true,
  state: () => ({
    isLogin: false,
  }),
  mutations: {
    log_in(state) {
      state.isLogin = true
    },
  },
  getters: {},
  actions: {
    getData({ commit }) {
    	getItem(
          (data) => {
            commit('get_result', data)
          },
          (err) => {
            console.log(err);
          }
        )
      },
  },
};

export default Member1;

 

8. API 파일작성 및 export

 

// src/api/Data1.js

import { apiInstance } from './index.js';
const api = apiInstance();

function getItem(res, err) {
  api.get(`요청할 URL`)
    .then(res).catch(err)
}

export getItem

 

 

9. 다시 store 파일로 돌아와 API에서 export 해온걸 임포트

 

// src/store/modules/Member1.js

import getItem from "@/api/Data1";

const Member1 = {
  namespaced: true,
  state: () => ({
    isLogin: false,
  }),
  mutations: {
    log_in(state) {
      state.isLogin = true
    },
  },
  getters: {},
  actions: {
    getData({ commit }) {
    	getItem(
          (data) => {
            commit('get_result', data)
          },
          (err) => {
            console.log(err);
          }
        )
      },
  },
};

export default Member1;

 

10. 해당 axios 작업을 통해 받아온 데이터들을 state에 정의

 

// src/store/modules/Member1.js

import getItem from "@/api/Data1";

const Member1 = {
  namespaced: true,
  state: () => ({
    isLogin: false,
    my_data: null
  }),
  mutations: {
    log_in(state) {
      state.isLogin = true
    },
    get_result(state,data) {
      state.my_data = data
    }
  },
  getters: {},
  actions: {
    getData({ commit }) {
    	getItem(
          (data) => {
            commit('get_result', data)
          },
          (err) => {
            console.log(err);
          }
        )
      },
  },
};

export default Member1;