# vuex 란?
vuex는 vue.js 내에 상태 관리 라이브러리 입니다.
# vuex가 생기게 된 이유
부모와 자식 컴포넌트간 props로 data를 이동하는 데에는 한계가 있었습니다. 부모의 부모의 부모까지 값을 내려주거나, 함수를 내리는 경우가 다분했기 때문이죠.
이벤트 버스로 값을 내리고 올리는 것에 한계를 느껴, 앱 내에 하나의 저장소를 놓고 모든 컴포넌트가 그 값에 접근하도록 하자라는 생각에 나온 것이 vuex입니다.
vuex내 store가 앱 내 모든 컴포넌트에 대하여 전역적으로 관리되는 state 저장 역할을 합니다. 그리하여 어느 컴포넌트든 store내 값에 접근하고, 값을 바꿀 수 있게 되는 것이죠.
# vuex 패턴
기본적으로 flux 패턴을 따릅니다. flux 패턴은 데이터의 단방향 흐름을 말합니다.
view에 보이는 state는 actions에 의해 값이 결정되고 그 action은 view에서 사용 가능 하다는 뜻이죠.
즉, view -> action -> state -> view 이렇게 단방향으로 데이터가 흐릅니다.
여기서 vuex는 mutation하나가 추가됩니다.
vuex의 데이터 흐름은 동일하게 단방향으로 view에서 Dispatch라는 함수를 동해 action이 발동되고 action안에 정의된 commit함수에 의해 mutations이 실행되고 mutations에 정의된 로직에 따라 state가 변화하고 그 state를 쓰는 view가 변하는 흐름을 따릅니다.
# 언제 사용하나요?
vuex는 여러 컴포넌트에서 공유하는 상태 관리에는 유용하지만 한개의 컴포넌트에서만 사용한다면 vuex보단 간단한 이벤트버스만 (opens new window)으로 데이터 처리하는 것을 추천합니다.
회사에서 다루는 중대형 어플리케이션의 경우 컴포넌트내 공유하는 state가 많아짐으로 자연스럽게 vuex를 사용하게 될 것입니다. 즉, 필요함을 느끼지 못한다면 굳이 쓰는 것을 추천하지 않습니다.
