[Vue.js 프로젝트 투입 일주일 전] 11장 - Vuex (v4.x)

11.1 Vuex란?

  - Vuex: Vue.js 애플리케이션을 위한 상태관리 패턴 + 라이브러리

  - 모든 컴포넌트에 대한 중앙집중식 저장소 역할, 예측 가능한 방식으로 상태 변경 가능

11.2 Vuex 설치

  - npm install vuex@next 명령어

11.3 시작하기

  - store(저장소): 애플리케이션 상태를 저장하고 있는 컨테이너

    - 반응형

    - 저장소의 state에 정의된 값 변경 여부 바로 알 수 있음, 직접적으로 상태 값 변경은 불가

      - commit를 통해서만 변경 가능

    - 모든 상태에 대한 추적이 가능한 기록이 남을 수 있음

11.4 State

  - state: 프로젝트 전체에서 공통으로 사용할 변수 정의

    - Vue 컴포넌트에서 computed 속성을 이용하여 변경사항 항상 추적 가능

11.5 Getters

  - ex) 장바구니에 담긴 데이터를 저장소의 state에 변수로 관리하고 있다면,

    장바구니에 담긴 제품 수, 특정 카테고리의 제품 리스트 등을 getters로 정의하여 쉽게 가져올 수 있음

11.6 Mutations

  - state에 정의된 변수 직접 변경 불가

    - mutations을 이용해서 변경해야 함 (동기 처리를 통해 state 변경사항 추적 가능)

  - mutations에 정의된 함수를 commit을 통해서 호출

11.7 Actions

  - action을 통해 mutations에 정의된 함수 실행 가능

  - 여러 개의 mutations 실행 가능, 비동기 작업 가능

  - 비동기 처리 후 mutations을 커밋할 수 있어서 store에서 비동기 처리 로직 관리 가능

11.8 Vuex 실무 예제

  - 실무) 사용자 로그인

    - 모든 컴포넌트에서 사용자가 로그인 했는지 정보를 알 필요가 있음

---

[Source Code] Ch 11. Vuex(v4.x)