What is the Vuex?

vuex

컴포넌트들 간에 공유해야 하는 데이터(예: 애플리케이션 데이터)는 이를 사용하는 컴포넌트와는 별도로 단일 위치에 보관해야 한다.

이 단일 위치를 store(저장소)라고 한다. 컴포넌트는 이 위치에서 애플리케이션 데이터를 읽어야 하며 충돌이나 불일치를 방지하기 위해 복사본을 자체적으로 보관해서는 안된다.

컴포넌트들은 저장소에서 데이터를 자유롭게 읽을 수 있다. 그러나 직접 변경은 불가능.

대신 데이터를 변경할 것이라는 것을 store에 알려야 하며, store은 “mutations”라고 하는 정의된 함수들을 통해 변경을 완수해야할 책임이 있다.

이렇게 데이터 변경 로직을 중앙 집중화하면 데이터에 불일치가 일어나거나 데이터에 다른 문제들이 생겼을 때 여러 곳을 일일이 뒤져볼 필요가 없다. 이것은 어떤 익명의 컴포넌트가 예상치 못한 방식으로 데이터를 변경할 가능성을 최소화 해준다.

위에 두 가지 원칙을 지키는 애플리케이션에서 데이터를 디버그 하는 것이 훨씬 쉽다. mutation의 commit을 기록하고 응답 상태가 어떻게 변경되는지 관찰할 수 있다.(Vue Devtools에서 Vuex를 사용할 때 실제로 그렇게 디버그 할 수 있다.)

그러나 만약 우리의 “mutation”이 비동기적으로 일어난다면 그런 방식의 디버그는 불가능 할 것이다. commit이 언제 발생했는지는 알 수 있어도, commit 안에 콜백이나 Promise 같은 것들이 들어간다면 추적이 불가능해진다.

mutation이 동기적으로 일어나는 것, 데이터가 예측할 수 없는 이벤트의 순서와 시간에 종속되지 않도로 보장한다.

Vuex는 Vue 애플리케이션에서 Flux 아키텍처를 구현하는 데 도움이 되는 라이브러리이다. 위 원칙 덕분에 Vuex는 여러 컴포넌트에서 데이터를 공유해도 애플리케이션 데이터를 투명하고 예측 가능한 상태로 유지한다.

Vuex를 구현하기 위해서는 store, mutators 가 포함되며 store에서 데이터를 읽는 모든 컴포넌트를 자동으로 업데이트한다.

또한 핫 모듈 리로딩(실행 중인 애플리케이션에서 모듈 업데이트) 및 시간 이동 디버깅(버그 추적을 위한 mutation 이벤트 역추적)과 같은 멋진 개발 기능을 제공한다.