Vuex Core Concept

holawan·2022년 5월 12일
0

Vue

목록 보기
13/13
post-thumbnail

Vuex Core Concepts

Vuex 핵심 컨셉

State

  • 중앙에서 관리하는 모든 상태 정보
    • Vuex는 single state tree를 사용
    • 즉, 이 단일 객체는 모든 애플리케이션 상태를 포함하는 "원본 소스(single source of truth)"의 역할을 함
    • 이는 각 애플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미함
  • 여러 컴포넌트 내부에 있는 특정 state를 중앙에서 관리하게 됨
    • 이전의 방식은 state를 찾기 위해 각 컴포넌트를 직접 확인해야 했음
    • Vuex를 활용하는 방식은 Vuex Store에서 각 컴포넌트에서 사용하는 state를 한 눈에 파악 가능
  • State가 변화하면 해당 state를 공유하는 여러 컴포넌트의 DOM은 (알아서) 렌더링
  • 각 컴포넌트는 이제 Vuex Store에서 state 정보를 가져와 사용

Mutations

  • 실제로 state를 변경하는 유일한 방법
  • mutation의 handler(핸들러 함수)는 반드시 동기적이어야 함
    • 비동기적 로직(ex. 콜백함수)은 state가 변화하는 시점이 의도한 것과 달라질 수 있으며, 콜백이 실제로 홏루될 시기를 알 수 있는 방법이 없음(추적 할 수 없음)
  • 첫번째 인자로 항상 state를 받음
  • Actions에서 commit() 메서드에서 의해 호출됨

Actions

  • Mutations와 유사하지만 다음과 같은 차이점이 있음
    1. state를 변경하는 대신 mutations를 commit() 메서드로 호출해서 실행
    2. mutations와 달리 비동기 작업이 포함될 수 있음(Backend API와 통신하여 Data Fetching 등의 작업 수행)
  • context 객체 인자를 받음
    • context 객체를 통해 store/index.js 파일 내에 있는 모든 요소의 속성 접근 & 메서드 호출이 가능
    • 단, state를 직접 변경하지 않음
  • 컴포넌트에서 dispatch() 메서드에 의해 호출됨
  • "Actions를 통해 state를 조작할 수 있지만, state는 오로지 Mutations를 통해서만 조작 해야함"
    • 명확한 역할 분담을 통해 서비스 규모가 커져도 state를 올바르게 관리하기 위함 ##

Getters

  • state를 변경하지 않고 활용하여 계산을 수행(computed 속성과 유사)
    • compute를 사용하는 것처럼 getters는 저장소의 상태(state)를 기준으로 계산
    • 예를 들어, state에 todoList라는 해야 할 일의 목록의 경우 완료된 todo 목록만을 필터링해서 출력해야 하는 경우가 있음
  • computed 속성과 마찬가지로 getters의 결과는 state 종속성에 따라 캐시(cached)되고, 종속성이 변경된 경우에만 다시 재계산 됨
  • getters 자체가 state를 변경하지는 않음
    • state를 특정한 조건에 따라 구분(계산)만 함
    • 즉, 계산된 값을 가져옴

정리

  • state
    • 중앙에서 관리하는 모든 상태 정보(data)
    • Mutations에 의해 변경됨
  • Mutations
    • state를 변경하는 유일한 방법
    • 반드시 동기적 로직이어야 함
    • 첫번째 인자로 항상 state를 받고, Actions의 commit()에 의해 호출됨
  • Actions
    • Mutations를 commit()으로 호출
    • 비동기 로직 작성 가능
    • 항상 context 객체를 받기 때문에 모든 속성에 접근할 수 있으나 state를 변경해서는 안됨
    • 컴포넌트에서 dispatch() 에 의해 호출됨
  • Getters
    • store의 상태를 기반하는 계산 값
    • 실제 상태를 변경하지 않음
    • computed 속성과 유사
profile
내가 공부한 내용들이 누군가에게 도움이 될지 몰라서 쓰는 벨로그

0개의 댓글