[basic] Vuex?
Vuex 란?
- 복잡한 애플리케이션의 컴포너트들을 효율적으로 관리하는 Vuex 라이브러리
- Vuex 라이브러리 주요 속성은 state(data), getter(computed), mutation(methods), actions(비동기 methods)
- 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태관리 패턴이자 라이브러리
- Vuejs 중고급 개발자로 성장하기 위한 필수 관문
vuex로 해결할 수 있는 문제
- MVC 패턴에서 발생하는 구조적 오류
- 컴포넌트 간 데이터 전달 명시
- 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제
vuex 컨셉
- state : 컴포넌트 간에 공유하는 데이터 data
- getter : 연산된 state 값을 접근하는 속성 computed
- mutation : state 값을 변경하는 이벤트 로직 , 메소드 methods
- view : 데이터를 표시하는 화면 template
- action : 사용자의 입력에 따라 데이터를 변경하는 methods , 비동기 처리 로직을 선언하는 메소드 async methods
state example
//vue
data : {
message:'Hello Vuejs!'
}
//mustach 표현법
<p>{{ message }}</p>
//vuex
state : {
message:'Whatsup Vujs!'
}
//mustach 표현법
<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>
<p> {{ this.$store.getters.doubleNUmber}} </p>
Mutation?
- state의 값을 변경할 수 있는 유일한 방법이자 메소드
- 뮤데이션은 commit() 으로 동작시킨다.
state:{
num:10
},
mutations: {
printNumbers(state){
return state.num
},
sumNumbers(state, anotherNum){
return state.num + anotherNUm;
}
}
// App.vue
this.$store.commit('printNumbers');
this.$store.commit('sumNumbers',20);
mutation의 commit() 형식
- state를 변경하기 위해 mutations 를 동작시킬 떄 인자(payload)를 전달 할 수 있음
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
});
action ?
- 비동기 처리 로직을 선언하는 메소드. 비동기 로직을 담당하는 mutations
- 데이터 요처, Promise, ES6 async과 같은 비동기 처리는 모두 actions에 선언
mutations: {
addCounter(state){
state.counter++
}
},
actions : {
delayedAddCounter(context) {
setTimeout( () => context.commit('addCounter'), 2000 );
}
}
//App.vue
methods: {
incrementCounter(){
this.$store.dispatch('delayedAddCounter');
}
}
Author And Source
이 문제에 관하여([basic] Vuex?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@brianhwang/basic-Vuex저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)