💻 Vuex란?
Vue.js의 상태관리 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 한다. 의도적인 방법으로 상태를 변경하거나 관리 할 수 있다.
💻 state
state는 vue 컴포넌트의 data라고 볼 수 있다. 컴포넌트 간 공유할 데이터가 있으며 어디든 참조가 가능하다. 직접 데이터를 변경할 수 없고, mutation을 통해 state가 변경된다.
💻 Mutation
Mutation은 state를 변경시키는 함수의 집합 객체이다.
- mutation은 함수로 구현되며 첫 번째 인자는
state를 받을 수 있으며, 두 번째 인자는payload를 받을 수 있다. - mutation은 일반적으로 helper를 사용하지 않는 이상 직접 호출이 불가능하고,
commit을 통해 호출이 가능하다.
📍payload
commit 메소드를 실행 할 때 payload 라고 하는 추가 전달인자를 사용하여 상태값을 변이 시킬때 사용한다. 대부분 payload는 여러 필드를 포함할 수 있는 객체(Object)로 전달 된다.
💻 Actions
Actions는 mutation과 비슷한 역할을 하지만 비동기 작업을 한다. commit을 통해 mutation을 호출하고, mutation을 통해 state를 변경시킨다.
- commit을 통해 mutation을 호출했지만 , actions는
dispatch를 통해 호출 가능하다.
💻 mapMutation
Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결 할 수 있는 헬퍼이다.
💻 mapActions
Vuex에 선언한 actions 속성을 뷰 컴포넌트에 더 쉽게 연결 할 수 있는 헬퍼이다.
👩💻✨junior developer