[Vue.js] Vuex

Vue.js 애플리케이션을 위한 상태관리 라이브러리다.

store이라는 중앙 저장소에 데이터를 보관하고 모든 컴포넌트가 이용할 수 있도록 해준다.

 

기존 컴포넌트간에 데이터를 넘길 때 eventbus나 props를 사용했지만, 컴포넌트가 많아질 수록 데이터 처리가 복잡해진다. 그러므로 vuex이용하여 store에서 관리하고 해당 데이터를 수정 및 삭제하는 것이 효율적이다.

 

1) Getters

getters는 state에서 데이터를 가져오는 함수를 나타낸다. getter의 결과가 의존성에 기반해 캐시되므로 의존성에 변화가 생겼을 경우에만 재실행된다.

 

2) Mutations

Mutation은 state를 바꾸는 유일한 방법으로 상태가 변경되는 것을 추적할 수 있고 한 곳에서 상태를 변경하기에 일관되게 데이터를 관리할 수있다.

//state => store내의 state 
payload : 입력 파라미터가 존재할 때 사용

methods :{
method_name(state,[payload]){
 this.$store.commit('method_name'); 
}
}

 

3) Actions

action은 mutation을 커밋해서 간접적으로 상태를 수정할 수 있고, 비동기적으로 동작한다.

• 비동기란 내가 request한 api가 response가 오는 작업만 기다리는 것이 아니고, 그 중간에 다른 작업을 처리 할 수 있다.

4) mapState, mapGetters, mapMutations,mapActions

컴포넌트에서 쉽게 접근할 수있게 한 vuex의 보조 함수

• mapState는 Vuex에서 state를 쉽게 접근할 수 있도록 helper역할
• mapGetters : getter을 computed 매핑
• mapMutations: mutation을 커밋하는 것을 단순화
• mapActions: action을 dispatch 하는 것을 단순화

5) Mutations와 Actions의 차이점

Mutation은 동기적 처리 Action은 비동기적 처리 방식