Vue는 프레임워크기 때문에 전역상태관리 도구도 제공한다.
EventBus처럼 컴포넌트간의 거리가 멀어지면 (깊이가 깊어지면) 발생하는 문제를 완화하기 위한 장치도 있지만, 근본적은 해결책이 되진 않는다.
Vue에서도 역시 전역상태관리 도구가 존재한다.
React와 비교해보면
Redux와 마찬가지로 단방향 데이터 흐름이기 때문에 데이터 추적이 용이하고 유지보수가 용이하다.
Vue.js Devtool은 상태가 변경(mutate) 되기 전 시간 추적 디버깅을 할 수 있다.
변이가 호출되어 상태가 어떻게 변경되었는지를 시간 순으로 추적할 수 있게 해준다.
주의할 점은 State를 변경할 때는 Mutate를 이용해야 하고, 변이의 목적은 순수하게 상태의 변경으로 한정해야한다.
상태의 변경 외의 모든 작업은 Actions를 통해서 하도록 하자.
Mutate는 기본적으로 동기적으로 수행된다. 비동기 관련된 작업은 Actions에서 한다.
Mutate 내부에서 비동기로 어떤 작업을 할 수도 있겠지만 목적에 맞게 사용하는 것이 나중에 애플리케이션을 관리하는데도 좋다.
폴더 구조 만들기
여러가지 방법이 있겟지만 store라는 폴더에 vuex관련된 파일들을 모으기로 했다.
store폴더 안에서 account 폴더를 만들고 계정 관련된 vuex모듈을 모아뒀다.
store폴더에서는 역할별로 vuex모듈이 분리되어 있다.
현재는 account라는 이름의 모듈만 있다.
vuex 모듈
-
constant.js에서는 상수를 정의한다.
String타입으로 사용하게 되면 오타 등 실수가 날 수 있는데, 이렇게 모듈화 한 뒤 import해서 사용하면 객체의 속성으로 접근할 수 있어서 좋았다.
-
actions.js 비동기로 실행되는 side effect를 정의한다. 해당하는 비동기 작업을 실행하고 데이터를 리턴하기도 하고 이어서
store.dispatch나store.commit으로 연관된 연속작업을 하기도 했다.
vue객체에서는 $store.dispatch(액션)로 실행할 수 있다.
- mutation.js vuex의 store를 직접 수정할 수 있는 곳이다. $store.commit(액션) 으로 접근 할 수 있다. 수정되는 과정은 동기적으로 수행되며, action과 확실히 분리해주는 것이 좋다.
actions는 side effect만을 일으키고, mutation은 state변경만을 수행하도록 작성하자.
vuex 역할별 분리
역할별로 구분하면 큰 vuex 객체를 생성할 때 좋다.
현재는 account 모듈만 있다. 필요에 따라 더 추가해주면 된다.
- index.js
plugin
React에서 Redux와 비슷하다고 느꼈다.
Redux에서 미들웨어를 사용했던 것처럼, Vuex에서도 Plugin이라는 기능을 제공한다.
mutation.type으로 실행된 mutate가 무엇인지 확인 할 수 있어, 타입에 따라 분기 시킬 수 있다.
- 기본 사용법
-
built-in logger
-
store의 상태가 변경되기 전 snapshot을 저장할 수도 있다.
process.env.NODE_ENV로 환경변수에 따라 다르게 사용할 수 있는데, 웹팩에서 define plugin이라고 하는 플러그인 설정을 해줘야 한다. 컴파일타임에 전역상수를 사용할 수 있도록 해주는 플러그인이다.
