Vuex- 주요 기술 요소

Vuex 기술 요소

- state : 여러 컴포넌트에 공유 되는 데이터 data

- getters : 연산된 state 값을 접근하는 속성 computed

- mutations : state값을 변경하는 이벤트 로직, 메서드 methods

- actions : 비동기 처리 로직을 선언하는 메서드 aysnc methods

​

*state란?

- 여러 컴포넌트 간에 공유할 데이터 = 상태

​

// vue

data : {
massage : " hello vue.js";

}


//Vuex

state : {
message : "hello vue.js";

}

​

<!-- 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;
},

dobleNumber(state){
       return state.num*2;
    }
}

<p> {{ this.$store.getters.getNumber }} </p> //10
<p> {{ this.$store.getters.dobleNumber}} </p> //20

​

*mutatuions란?

-state의 값을 변경할 수 있는 유일한 방법이자 메서드

-뮤테이션은 commit()으로 동작시킨다.

​

예제)

 

//store.js

state : {num : 10},

mutations : {
printNumber(state){
return state.num

},

sumNumbers(state, anotherNum){
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 : 'passed from payload',
num : 20

});

​

* state는 왜 직접 변경하지 않고 Mutations로 변경할까?

-여러 개의 컴포넌트에서 아래와 같이 state값을 변경하는 경우

어느 컴포넌트에서 해당 state를 변경했는지 추적하기 어렵다

 

예시 )

methods : {

increaseCounter() {this.$store.state.counter++;}

}

​

-특정 시점에 어떤 컴포넌트가 state를 접근하여 변경한 건지 확인하기 어렵기 때문

-따라서, 뷰 반응성을 거스르지 않게 명시적으로 상태 변화를 수행. 반응성, 디버깅, 테스팅 혜택

​

*actions란?

-비동기 처리 로직을 선언하는 메서드. 비동기 로직을 담당하는 mutiations

-데이터 요청, Promise, EF6 async과 같은 비동기 처리는 모두 actions에 선언

​

예시)

// store.js

state : {
num : 10
},

mutations : {
doubleNumber(state){
state.num * 2;
}
},

actions : {
delayDoubleNumber(context){ // context로 store의 메서드와 속성 접근
context.commit('doubleNumber');
}
}
​

//App.vue
this.$store.dispatch('delayDoubleNumber');

 

비동기 코드 예제)

// store.js

mutations : {
addCounter(state){
state.counter++
}
},

actions : {
delayedAddCounter(context){
setTimeout( ()=> context.commit('addCounter'), 2000)
}
}

//App.vue

methods : {
incrementCounter(){
this.$store.dispatch('delayedAddCounter');
}
}

​

* 왜 비동기 처리 로직은 actions에 선언해야 할까?

-언제 어느 컴포넌트에서 해당 state를 호출하고, 변경했는지 확인하기가 어려움

결론: state값의 변화를 추적하기 어렵기 때문에 mutations 속성에는 동기 처리 로직만 넣어야 한다

​

​