' 생생한 꿈을 꾸는 몽쉘의 개발 블로그 '

store의 기본 구조

import Vuex from 'vuex';

export cont SET_DATA = 'SET_DATA';
export cont SET_DATA2 = 'SET_DATA2';

export default new Vuex.Store( {
	
	// 데이터들이 모두 store에 있기 때문에 관리하기가 쉬워진다.
	
	state : {	// vue의 data와 비슷 

		// 다른 곳에서 store의 state를 사용하기 위해서는 computed를 사용해야 한다.
		// ex) computed : { test() { return this.$store.state.test; } }
						
		
		test : "",

	}, 

	getters : {	// vue의 computed와 비슷

	
	   }, 
	mutations : {	// state를 변경할 때 반드시 여기서 해야함 (동기적)
					// mutations는 기록을 남기기 때문에 state가 어떻게 바뀌는지 추적이 가능하다. (개발자 도구에서 확인 가능)
	    
		// 상수로 정의해서 쓰는 것을 권고 (오타 방지)
		// 다른 곳에서 store의 mutations을 부르는 방법은 ??? 1.this.$store.commit( 'SET_DATA', this.data ) === 2.this.$store.commit( SET_DATA, { data1 : this.row, data2 : this.cell } )
		// 2번은 부르는 곳에서 import { SET_DATA, SET_DATA2, ...  } from './store';
		
		// 대문자로 쓰는 것을 권고
		[SET_DATA]( state, data ){
			state.test = data;
		}
		
		//구조분해 가능
		[SET_DATA2]( state, { data1, data2 } ){
			state.test = data1;
		}		
		
		// 변수가 배열일 경우, 아무리 값을 변경해 보아도 적용이 안 되는 문제점 -> 해결 : vue - this.$set(), vuex - Vue.set() 
 
	    
	 }, 
	actions : {  // vue의 methods와 비슷 - (비동기)를 사용할 때, (동기적)인 mutations를 비동기적으로 연달아 실행할 떄 사용

	

	 }, 
	
});