vuex store 개념

murkgom·2022년 3월 7일
0
post-custom-banner

핵심 컨셉 3가지

  • State(상태)
  • Mutations(변이)
  • Actions(액션)

1. State(상태)

= 데이터

사용법
vue component의 computed 내의 변수에서 사용

...
computed: {
	count() {
    	return this.$store.state.count;
    }
},
...

Getters

= store의 computed

2. Mutations(변이)

= 값 변경

//store 설정에서
...
state: {
 	count: 0 
}, 
mutations: {
  	//핸들러 선언
 	 increase(state, payload) {
      	state.count += payload;		//payload : param 개념으로 보면 될 듯
     }
}
...

사용법
직접 호출하지 못하고, commit을 통해 핸들러 호출

...
//payload : 3으로 호출한 케이스
this.$store.commit('increase', 3);
...

3. Actions(액션)

= Mutations을 비동기로 실행

사용법
컴포넌트에서 dispatch를 이용해 호출

...
this.$store.dispatch('action명', param);
...
post-custom-banner

0개의 댓글