Vuex
Vuex
Vuex
- 상태란 Vue.js 애플리케이션의 데이터를 의미하며, 컴포넌트간에 공유됨
- 상태를 중앙에서 관리하고 각 컴포넌트에서 사용할 수 있게 제공하는 라이브러리가
Vuex Vuex없이도props등을 이용해 컴포넌트간 상태를 전달할 수 있지만, 다음과 같은 문제점이 있음- 컴포넌트가 여러 개 중첩 된 경우, props를 통해 데이터를 전달하려면 해당 컴포넌트들에게 모두 전달해야 함
- 이런 경우 코드가 복잡해지고 유지 보수가 힘듦
- 형제 컴포넌트 간 상태를 이동할 수 없음
Vuex는store라는 컨테이너에 상태를 저장하는데, 이는 전역 변수와는 다름- store에 저장된 상태가 변경되면 화면도 바뀜 (반응형)
- store에 저장된 상태를 변경하기 위해서는
commit이라는 함수를 사용해야만 함
예시 코드 설명
const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
},
});
Vuex.Store의state와mutations항목에 상태 및 관련 함수를 저장- state: 상태를 저장하는 장소로, store.state로 접근 가능
- mutations: 상태를 변경하는 함수들을 저장하는 장소로, store.commit(함수 이름)을 통해 함수 실행 가능
store.commit("increment")를 실행하면count가 1 증가됨