[Vue] Vuex 2. 기술 요소

 

 

vuex 구조

 

• state : 여러 컴포넌트에 공유되는 데이터 data
• getters : 연산된 state 값을 접근하는 속성 computed
• mutations : state 값을 변경하는 이벤트 로직 methods
• actions : 비동기 처리 로직을 선언하는 메서드 async methods

 

state

여러 컴포넌트 간에 공유할 데이터

// Vue
data: {
    message: 'Hello!'
}

// Vuex
state: {
	message: 'Hello!'
}

<-- Vue -->
<p>{{ message }}</p>

<-- Vuex -->
<p>{{ this.$store.state.message }}</p>

 

getters

state 값을 접근하는 속성이자 computed( ) 처럼 미리 연산된 값을 접근하는 속성

// store.js
state: {
    num: 10
},
getters: {
	getNumber(state) {
    	return state.num;
    },
    doubleNumber(state) {
    	return state.num * 2;
    }
}

// state 접근을 더 쉽게 함(Helper 함수와 같이 쓰면 더 시너지)
<p>{{ this.$store.getters.getNumber }}</p>
<p>{{ this.$store.getters.doubleNumber }}</p>

 

 

mutations

state 값을 변경할 수 있는 유일한 방법이자 메서드. commit( )으로 동작시킴

// store.js
state: { num: 10 },
mutations: {
    printNumbers(state) {
    	return state.num
    },
    sumNumbers(state, amotherNum){
    	return state.num + anotherNum;
    }
}

// App.vue
this.$store.commit('printNumbers');
this.$store.commit('sumNumbers', 20);

mutations의 commit 형식 : state를 변경하기 위해 mutations를 동작시킬 때 인자(payload)를 전달할 수 있음

// store.js
state: { storeNum: 10 },
mutations: {
    modifyState(state, payload){
    	console.log(payload.str);
        return state.storeNum += payload.num;
    }
}

// App.vue
this.$store.commit('modifyState', {
    str: 'pass from payload',
    num: 20
})

state를 직접 변경하지 않고 mutations로 변경하는 이유 : state는 여러 컴포넌트에서 공유하고 있기 때문에 state를 변경하는 경우 어느 컴포넌트에서 해당 state를 변경했는지 추적이 어렵기 때문에. 뷰의 반응성을 거스르지 않게 명시적으로 상태 변화 수행

 

 

actions

비동기 처리 로직을 선언하는 메서드. dispatch( )로 동작시킴. 비동기 로직을 담당하는 mutations라고 보면 된다. 데이터 요청, Promise, ES6 async 와 같은 비동기 처리는 모두 actions에 선언

// store.js
state: {
    num: 10
},
mutations: {
	doubleNum(state){
    	state.num * 2
    }
},
actions: {
	// actions에서 mutations로 접근하기 위한 경로로 context가 제공됨
	delayDoubleNum(context){
    	context.commit('doubleNum')
    }
}

// App.vue
this.$store.dispatch('delayDoubleNum')

제일 위에서 봤던 vuex 구조상 actions의 함수가 state를 변경하는 것이라면 바로 state를 변경하지 못하고 mutations에 작성해서 변경해야 한다.