Vue.js axios + store 사용하여 메뉴 불러오기

1. axios 설치

npm i axios

2. @/api/index.js 생성

import axios from 'axios';

function createInstance() {
	const instance = axios.create();
	return instance;
}
export const instance = createInstance();

3. @/api/menus.js

import { instance } from './index';

async function fetchMenus(data) {
	try {
		return await instance.post('/menu/get-all', data);
	} catch (error) {
		console.log(error);
	}
}

4. 메뉴를 불러와 store에 저장할 것이다.
@/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './actions';

export default new Vuex.Store({
	state: {
		menus: [],
    	},
	getters: {
		menuItems(state) {
			return state.menus;
		},
        },
    	mutations,
    	actions,
});

5. @/store/mutations.js

export default {
  SET_MENUS(state, data) {
    state.menus = data;
  },
};

6. @/store/actions.js 생성

import { fetchMenus } from '../api/menus';

export default {
  async FETCH_MENUS({ commit }, data) {
    const response = await fetchMenus(data);
    commit('SET_MENUS', response.data.payload.menus);
    return response;
  },
}

7. @/view/menu/AllMenuPage.vue

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['menuItems']),
  },
  ...
}