2021년 06월 19일

Note

Vuex

• 상태 관리 도구

  • 상태(state): 여러 컴포넌트간에 공유되는 데이터 속성

    // Vue
    data: {
      message: 'vue'
    }
    
    // Vuex
    state: {
      message: 'vuex'
    }

    <div>{{ message }}</div>
    
    <div>{{ this.$store.state.message }}</div>

• 많은 컴포넌트를 사용해서 상태 관리가 복잡할 때 사용
• Flux에서 기인
• npm i vuex로 dependencies에 추가
• import Vuex from 'vuex'로 불러오기
• Vuex를 store라고 말하는데 관행적으로 src/store 디렉토리에 저장한다.
  • store(저장소)는 기본적으로 애플리케이션의 상태를 보유하고 있는 컨테이너
  • store가 일반 전역 객체와 다른점
    • 반응형. Vue 컴포넌트가 상태를 검색할 때 저장소의 상태가 변경되면 갱신된다.
    • 저장소의 상태는 직접 변경이 불가능하다. 커밋을 이용해 변경해야 한다. 모든 상태에 대해 추적이 가능해진다.
• Vuex의 요소
  • state: 여러 컴포넌트에 공유되는 데이터 data
  • getters: 연산된 state 값을 접근하는 속성 computed
    • 💡 캐싱 효과
  • mutations: state 값을 변경하는 이벤트 로직, 메서드 methods
  • actions: 비동기 처리 로직을 선언하는 메서드 async methods

log

• 친구집 집들이를 가기로 한 날