vuex 내부 살펴보기

vuex의 기본 요소는 다음과 같다. 

Vuex.Store({

    state: { // 1)

    },

    mutations { // 2)

    },

    actions { // 3)

    }

})

1) state

state는 store에서 갖고 있는 데이터들을 의미한다. 

state 안에 선언된 데이터들은 vue 인스턴스 내부에서 접근할 수 있지만,

vue 인스턴스에서 직접적으로 데이터를 수정하지는 못한다. 

* vue에서 store에 접근하는 예시 코드 

export default {

mounted() {

console.log(this.$store.state);

}

}

그렇다면 store의 데이터를 set 및 update를 하기 위해서는 어떻게 해야하는가?

데이터 set, update를 지원하는게 mutations와 actions다.

2) mutations

store에 선언된 데이터들을 변경하는 함수를 모아놓은 object다. 

Vuex.store({

state: {

fruits: [] 

},

mutations: {

setFruits(state, fruits) {

state.fruits = fruits;

}

}

})

예시로는 위와 같을 것 같다. 

코드에서 살짝 예상할 수 있듯이 mutations은..

1) 비동기로 데이터를 받는 경우 처리 불가능하다. (ex. api 응답값으로 데이터 셋팅..)

2) 단순히 데이터를 셋팅하는 역할만 한다. 

앗, 그런데! 

앞 서 선언한 mutations 내부 함수들은 store에서 직접적으로 호출하지 못한다. 

mutations의 함수들을 호출시켜주는게 store의 commit 메소드다. 

다음은 vue 인스턴스에서 commit 메소드를 사용하여 store의 데이터를 변경하는 예시 코드다. 

export default {

mounted() {

this.$store.commit('setFruits', ['apple', 'banana']);

}

}

3) actions

actions도 함수들을 모아둔 object다. 

actions 내부에 선언하는 함수는 내부적으로 

1) state의 값을 변경(mutations에 선언한 함수)을 위해 commit 메소드를 호출한다. 

2) 비동기 데이터를 가져와서 commit 메소드를 호출한다. 

3) state 값을 commit 하기 전 데이터를 다듬을 수 있는 비지니스 로직을 추가할 수 있다. 

다음은 getFruits라는 api 호출 메소드를 사용하여 state 값을 변경하는 예시 코드다. 

Vuex.store({

state: {

fruits: []

},

mutations: {

setFruits(state, fruits) {

state.fruits = fruits;

}

},

actions: {

fetchFruits({commit}) {

return getFruits().then((res) => { // res는 array type ex. [], ['aa', 'bb']

if (res.length == 0) {

return;

}

commit('setFruits', res);

})

}

}

})

mutations 에서와 마찬가지로 actions의 함수들도 직접적으로 호출은 불가하다. 

actions의 함수를 호출하기 위해선 store의 dispatch 메소드를 호출해야 한다.

다음은 vue 인스턴스에서 action을 호출하는 예시 코드다. 

export default {

mounted() {

this.$store.dispatch('fetchFruits');

}

}