Vuex란?
Vuex는 Vue.js 응용 프로그램을 위한 상태 관리 패턴 + 라이브러리이다. Vue 어플리케이션의 모든 구성 요소에 대한 중앙 집중식 저장소의 역할을 하며, 상태가 예측 가능한 방식으로만 변형될 수 있도록 보장하는 규칙을 가지고 있다.
Vuex를 왜 사용하는가?
Vue는 컴포넌트 사이에 단방향 통신만을 지원하기 때문이다.
Vuex를 꼭 사용할 필요는 없다. 오히려 한두군데서밖에 사용하지 않는 state를 꾸역꾸역 store에 저장하는 것이 더 안 좋을 수도 있음.
Vuex의 중심 컨셉 (state, getters, mutations, actions)
Vue Component에서 변화가 일어난다면 dispatch 함수를 통해 Actions에 저장된 메소드를 호출한다.
Actions의 메소드에서 백엔드와 통신을 하여 데이터를 가공하는 과정을 거친다. 이때는 동기 통신과 비동기 통신 모두 사용 가능하다. 통신이 끝나면 commit을 통해 mutation의 메소드를 호출한다.
Mutations에서 실제 state의 상태를 변경한다. (commit 함수를 통해 자동으로 일어난다.)
State의 값이 바뀌면 Rendering을 통해 다시 웹페이지에 갱신된 정보를 출력한다.
getter는 state에 무작위적인 접근을 막기 위해 사용된다.
| state | store에 저장된 상태 (데이터) | this.$store.이름 |
| actions | 비동기 통신.. | this.$store.dispatch( 'actions 메소드 이름' ) this.$store.dispatch( 'actions 메소드 이름' , payload ) |
| mutations | 동기 통신. state가 변경됨 | this.$store.commit( 'mutiation 메소드 이름' ) this.$store.commit( 'mutiation 메소드 이름' , payload ) |
| getters | state를 가공한 값을 참조할 수 있음(vue의 computed와 비슷) | this.$store.getter.게터이름 |
