상태관리
여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴
Vue 상태관리
데이터를 단방향으로, 중앙집중적으로 관리
상태(state) 앱을 작동하는 data
뷰(view) 데이터를 받아 그려주는 vi 화면
액션(action) 사용자의 입력에 따라 반응적으로 데이터를 변경하는 method
Vuex
여러 컴포넌트라도 쉽게 상호작용할 수 있게 돕는 라이브러리
state, muations, actions, getter 4가지 형태로 관리
관리 포인트는 store 라 불림
state
원본 소스 역할인 data, mutation을 통해서만 변경 가능
muations
유일하게 state를 변경할 방법, 메서드와 유사.
commit을 통해서만 호출, 함수로 구현
API를 통해 전달 받은 데이터를 mutation에서 가공하여 state를 변경
actions
비동기 작업 가능
mutation을 호출하기 위한 commit 가능
dispatch를 통해 호출
axios를 통한 api 호출과 그 결과에 대해 return or mutation으로 commit하는 용도로 사용
getter
computed 처럼 계산된 속성
state에 대해 연산, 그 결과를 view에 바인딩
state의 변경 여부에 따라 view 업데이트
=> dispatch를 통해 action 실행, Actiondptj 백엔드랑 API 통신, 그 결과를 리턴하거나 mutation으로 commit
=> API를 통해 전달 받은 데이터를 mutation에서 가공, state 변경
getter를 이용해서 다시 component에 바인딩 돼 화면 갱신
