[Vue] Vuex실습

Vuex란?

Vuex는 Vue 앱에서 상태(state)를 관리할 수 있게 해주는 기술이다. 상태를 한 곳에 모아두는 저장소(Store) 개념을 사용한다.

Store의 주요 구성 요소

구성 요소	역할
state	단일 상태 트리를 사용. 애플리케이션마다 하나의 저장소를 관리한다 (data에 해당).
getters	Vue 인스턴스의 computed와 같은 역할. State를 기반으로 값을 계산한다.
mutations	State 상태를 변경하는 유일한 방법.
actions	상태를 직접 변이시키는 대신, 액션으로 변이(mutation)에 대한 커밋을 처리한다 (비동기 처리에 해당하는 methods).

데이터를 바꾸는 작업은 오직 mutations에서만 한다.

화면 생성 흐름

• 실제 화면을 만드는 곳은 main.js이며, render에서 화면을 그린다.
• App.vue를 import해서 화면을 구성하고, 그 결과를 #app에 mount 시킨다.
• 공유할 데이터는 state에 저장한다.
• 일반적으로 상태 변경 요청은 action을 거쳐 처리한다.