Vuex 기술 요소

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

state

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

// Vue
data : {
	message : 'Hello Vue,js!'
}
// Vuex 
state : {
	message : 'Hello Vue,js!'
}

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

// Vuex 
- Vue.use() 로 플러인 추가해서 전체 컴포넌트에서 접근 가능
<p>{{ this.$store.state.message }}</p>

getters(값을 접근)

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

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

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

mutations(값을 변경)

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

// store.js
state: {
	num : 10
},
mutations :{
	printNumbers(state) {
    	return state.num;
    },
    sumNumbers(state){
    	return state.num + anotherNum;
    },
    modifyState(state, payload){
    	console.log(payload.str);
      	return state.storeNum += payload.num;
    }
}
// App.vue
this.$store.commit('printNumbers'); //10
// 두번째 인자로 값을 넘길수 있음.
this.$store.commit('sumNumbers', 20); //30
// 여러 값을 넘기고 싶은 경우 key, val 값으로 넘기면 됨.
this.$store.commit('modifyState', {
  str : 'passed from payload',
  num : 20
});

왜 state는 직접 변경하지 않고 mutations로 변경해야됨?

• state는 여러개의 컴포넌에서 데이터를 공유
• "어느 컴포넌트" 에서 해당 state를 변경했는지 추적 어려움
• 특정 시점에 어떤 컴포넌트가 state를 접근하여 변경한 건지 확인이 어려움
• vue core팀에서도 mutations를 거쳐야 반응성(화면에 바로 반영이 되는 성질)이 "잘" 적용되도록 설계
• 추가적으로 반응성, 디버깅, 테스팅 혜택
  

actions

• 비동기 처리 로직을 선언하는 메서드(비동기 로직을 담당하는 mutations)
• 데이터 요청, Promise, ES6 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'); //20

actions 비동기 코드 ex

// store.js
mutations :{
	addCounter(state) {
    	state.counter++
    },
},
actions: {
  	delayedAddNumber(context){
      setTimeout(() => context.commit('doubleNumber'), 2000);
	}
}
// App.vue
methods: {
  incrementCounter(){
		this.$store.dispatch('delayedAddNumber');
  }
}

actions 비동기 코드 ex2

// store.js
mutations :{
	setData(state, fetchedData) {
    	state.product = fetchedData;
    },
},
actions: {
  	fetchProductData(context){
      return axios.get('http://domain.com/products/1')
      .then(response => context.commit('setData', response));
	}
}
// App.vue
methods: {
  getProduct(){
		this.$store.dispatch('fetchProductData');
  }
}

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

• actions도 역시 언제 어떤 컴포넌트에서 해당 state를 호 출, 변경하는지 확인이 어려움.
  ex) 여러개의 컴포넌트에서 mutations로 시간차를 두고 state를 변경하는 경우
• state 값의 변화를 추적하기 어려움 -> mutations 속성에는 동기 처리 로직만 넣어야 됨.