vuex를 통해 API 호출하는 경우 라이프사이클 꼬이는 문제

vue로 개발을 할때 보통 vuex로 상태관리를 하는데 api -> store -> 컴포넌트 순으로 api를 끌어올것이다.

컴포넌트에서 dispatch로 호출하고 데이터값을 가져온후 콘솔을 찍고 싶었지만 데이터양이 많아서그런지

콘솔을 먼저 찍고 api호출하는 문제가 생겼다.. 

그래서 create에서 api를 호출하고 mounted에서 콘솔을 찍으면 될까?

했지만 안된다 ^^... vuex를 사용할 경우 vuex를 나중에 인식한다나 뭐라나 ^^.... 

그래서 결국 쓴 방법이 vuex에서 async, await를 주고

컴포넌트에서 then으로 호출순서를 각자 지정해줬다

그랬더니 정상적으로 데이터호출을 먼저하고 콘솔이 나중에 찍힌다..

//API.js

function fetchList(){
    return axios.get('api/list');
}

// store.js

const store = createStore({
	state: {
		listData: [],
	getters: {
	},
	mutations: {
		SET_List(state, data) {
		state.listData = data;
		},
	},
	actions: {
		async FETCH_List(res,idx) {
		await fetchList()
			.then(function (response) {
				res.commit("SET_List", response.data.data);
			})
			.catch((error) => console.log(error));
		},
});

//컴포넌트

data() {
    return {
        Arr : [],
    }
},
created(){
    var vm = this;
    var getApi = this.$store.dispatch('FETCH_List');
    getApi.then(function(){
        vm.Arr = vm.$store.state.listData;
        console.log(vm.Arr);
    });
},