Vuex 기술 요소(state, getters, mutations, actions)

Vuex 기술 요소

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

---

State 란?

• 여러 컴포넌트에 공유되는 데이터 - 상태

//VUE
data: {	message: 'Hello Word!' }
//VUEX
state: { message: 'Hello Word!' }

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

<p>{{ this.$store.getters.getNumber }}</p>
<p>{{ this.$store.getters.douleNumber }}</p>

---

mutations 란?

• state 의 값을 변경할 수 있는 유일한 방법이자 메서드
• 뮤테이션은 commit() 으로 동작시킨다
• mutations 안의 메서드는 항상 state 라는 인자를 가지고 있다.

//store.js
state: { num:10 },
mutations: {
  //mutations 안 메서드는 항상 state 를 인자로 가지고 있다. vue convension
  printNumbers( state ) {
    return state.num
  },
  sumNumbers( state, anotherNum ) {
    return state.num + anotherNum;
  }
}

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

 

//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: 'passsed from payload',
  num: 20
} );

---

actions 란?

• 비동기 처리 로직을 선언하는 메서드. 비동기 로직을 담당하는 mutations
• 데이터 요청, Promise, ES6 async 과 같은 비동기 처리는 모두 actions에 선언

//store.js
state: {
  num: 10
},
mutations: {
  doubleNum(state) {
    state.num * 2;
  }
},
actions: {
  delayDoubleNum( context ) { // context로 mutations 의 메서드와 속성 접근
    context.commit ( 'doubleNum' );
  }
},
//App.vue
this.$store.dispatch('delayDoubleNum');