Vuex 기술 요소

Vuex 기술 요소

state: 여러 컴포넌트에 공유되는 데이터 (data)

 

getters: 연산된 state 값을 접근하는 속성 (computed)

 

mutations: state 값을 변경하는 이벤트 로직/메서드 (methods)

   state는 왜 직접 변경하지 않고 mutations로 변경할까?

     - 여러 개의 컴포넌트에서 아래와 같이 state 값을 변경하는 경우 어느 컴포넌트에서 해당 state를 변경했는지 추적하기 어렵다.

     - 특정 시점에 어떤 컴포넌트가 state를 접근하여 변경한 건지 확인하기 어렵기 때문

     - 따라서, 뷰의 반응성을 거스르지 않게 명시적으로 상태 변화를 수행, 반응성, 디버깅, 테스팅 혜택.

 

actions: 비동기 처리 로직을 선언하는 메서드 (async methods)