Vuex
- Vuex는 Vue.js Application에 대한 상태/데이터 중앙 관리 패턴이자 라이브러리이다.
- Store라는 데이터를 통해 여러 Application이 공통적으로 사용해야 하는 데이터들을 정리하고 접근 및 관리하게 한다.
왜 필요한가?
- Vuex 없이 각 Application들이 서로 상당한 규모로 얽혀있을 경우, 데이터를 주고 받기 위해 prop에 대한 설정이 매우 복잡해진다.
- Vuex 없이는 직접 다른 인스턴스들을 참조하거나 조작하게 될 경우 생성되는 여러 복사 데이터들 때문에 효율성이 떨어진다.
Store 구조
state
- Store가 다룰 공용 데이터 부분이다.
- 함수의 형태로 명시되며, 프로젝트 내의 모든 곳에서 참조 가능하다.
- Application 에서 직접적인 참조 및 사용이 가능하나, 직접적인 수정은 Mutation을 통해야 한다.
- ‘this.$store.state.temp’와 같은 형태로 접근 가능하다.
export const state = () => ({
name: null,
age: null,
sex: null,
})
mutation
- Store의 state에 있는 데이터를 변경하고자 명시되는 부분이다.
- 동기처리 방식을 사용하기에 하나의 함수가 실행되고 종료되어야 다음 함수가 실행된다. 그렇지 않을 경우 메소드들의 순서와 종료 시점을 알 수가 없어 state의 데이터가 꼬이는 현상이 발생할 수 있다.
- mutation 내에서 함수 형태로 작성된다.
- 아래 예시와 같은 방식으로 실행시킬 수 있다.
// payload를 가진 commit
this.$store.commit('function', {
temp: 8
})
// 객체 스타일 commit
this.$store.commit({
type: 'function',
temp: 8
})
action
- Mutation을 실행시키기 위해 명시된다.
- 비동기처리이기에 순서에 상관 없이 먼저 종료된 함수의 피드백을 받아 후속 처리를 한다.
- action 내에 함수형태로 작성된다.
- 비동기처리이기에 콜백함수를 사용하기도 한다.
- 아래의 예시와 같이 action을 실행시킬 수 있다.
// 페이로드를 이용한 디스패치
this.$store.dispatch('function', {
num: 10
})
// 객체를 이용한 디스패치
this.$store.dispatch({
type: 'function',
num: 10
})
getters
- 프로젝트 내 Component들이 공통으로 사용하는 computed를 정의하는 곳이다.
- 아래의 예시와 같이 사용하면 Getter를 사용할 수 있다.
export const getters = {
getAccountName(state) {
return state.account;
}
};
- 접근 방법은 아래와 같다.
this.$store.getters["path1/function1"];
Map 헬퍼
- Component에 연결된 Store의 다양한 기능들이 많이 호출되면 코드가 상당히 복잡해진다. 이를 방지하기 위해 사용하는 것이 Map 헬퍼이다.