Vuex는 한 어플레케이션의 모든 컴포넌트에 대한 중앙 저장소 역할을 한다.
스토어는 애플리케이션의 상태를 저장/관리하는 역할을 수행한다.
Vuex는 신뢰할 수 있는 유일 정보원 패턴을 사용하는 것을 전제로 구현되었고, 여기서 사용되는 유일 정보원이 스토어다.
스토어를 구성하는 개념으로 스테이트(state), 게터(getter), 뮤테이션(mutation), 액션(action)이 있다.
스테이트(state)
스테이트는 애플리케이션의 상태를 저장하는 객체다.
애플리케이션의 상태를 스테이트에 저장해 유일 정보원으로서의 역할을 수행할 수 있게 한다.
하지만 애플리케이션의 모든 정보를 스테이트에서 관리할 필요는 없다. 컴포넌트 안에서만 사용되는 데이터는 컴포넌트에 두는 것이 적합하다.
스테이트에 저장하는것이 적합한 데이터로는 서버에서 데이터를 받아오는 중인지 나타내는 플래그, 사용자 정보, 여러 컴포넌트에서 사용될 가능성이 있는 데이터들이 있다.
게터(getter)
게터는 스테이트로부터 다른 값을 계산해 얻어낼 때 사용한다.
컴포넌트의 computed와 같은 기능을 한다.
게터는 계산한 값을 캐싱해두고, 이 값은 해당 값을 계산하는데에 쓰인 스테이트가 바뀌지 않는 한 유지된다.
이를 통해 자주 사용되는 계산 로직을 게터로 생성해두면 퍼포먼스를 향상시킬 수 있다.
뮤테이션(mutation)
뮤테이션은 스테이트를 업데이트 할 때 사용된다.
뮤테이션만이 스테이트를 수정할 수 있기 때문에 스테이트의 상태 수정이 발생했을 때 추적이 쉽다.
뮤테이션은 동기 처리만을 담당해야한다. 만약 비동기 처리를 사용하면 스테이트 수정이 어떤 뮤테이션 호출에서 일어났는지 알기 어려워진다.
액션(action)
액션은 바로 이전에 설명한 뮤테이션과 달리 비동기 처리를 담당한다.
액션은 비동기 처리 이외에도 외부 API 통신 수행과 뮤테이션을 호출하기 위해 사용된다.
store.dispatch('액션 함수명', 전달인자) 형태로 사용한다.
액션의 함수들은 비동기처리이기 때문에 주로 콜백함수로 작성된다.