Vuex란? (1)

Vuex란?

• Vuex는 Vue.js에 대한 상태관리 패턴 + 라이브러리 입니다
• 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 합니다

 

 

- Vuex 사용이유

• 공통의 state를 공유하는 여러 컴포넌트가 있으면 중첩되는 prop이 많이 생기게 됩니다. 
  이는 나중에 유지보수하기 힘든 난해한 코드가 될 수 있습니다
• 이러한 공통의 state는 동일한 상태로 관리되어야 합니다. Vue.js는 단방향으로 데이터가 흐르기 때문에 여러 컴포넌트가 state를 공유하는 경우 관리가 복잡해질 수 있습니다.

 

 

- Vuex의 핵심 속성

 

 

• state : 컴포넌트간 공유할 data 집합입니다
• getter : Vuex의 state 변경을 각 컴포넌트에서가 아닌 Vuex에서 수행하도록 하고 Getter로 호출합니다
• mutations : Vuex에서 state를 변경할 수 있는 유일한 방법이며 메서드와 유사합니다. 동기적 로직을 정의합니다
• actions : mutations와 유사하지만, 상태를 직접 변이시키는 대신 action으로 mutations에 대한 commit을 합니다mutations와 다르게 비동기적 로직을 정의합니다