-
vue13(vuex)JS/vue.js 2022. 3. 16. 17:59
vuex
: 상태 관리 라이브러리
state(상태) : 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터를 '상태'라고 한다.
상태 관리 : 애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리 → 효율적으로 데이터 관리
(↔props, emit event, eventbus 활용)
- vuex를 쓰는 방법↓
1. State : 변수 정의
- 프로젝트 내의 모든 곳에서 참조 및 사용 가능
- state를 통해 각 컴포넌트에서 동일한 값 사용 가능
2. Mutations : state 변경하는 로직 (state 변경은 mutation을 통해야만 함! only!)
- 동기적 로직 : 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수 있기 때문에!
- 함수 형태로 작성
- 인자를 받아 vuex에 넘겨줄 수 ㅇㅇ
- computed 가 아닌 methods에 등록
- 컴포넌트에서 mutation을 호출하려면 commit() API 사용
3. Actions : mutations 실행 (→state도 변경)
- 비동기적 로직
4. Getters : computed(계산된 속성)과 매칭되는 기술 요소
- 여러 components에서 동일한 computed 사용된 경우에 Getters에 정의해서 공통으로 사용 (mixin 느낌)
- 상태(state)값이 변경되었을 때 변화에 따른 차이를 자동으로 반영하여 값을 계산해줌
- computed의 장점인 캐싱 효과는 state값을 반환하는게 아니라, getters에 선언된 속성에서 filter(), reverse() 등의 추가적인 계산 로직이 들어갈 때 발휘됨!
-map helper
반복되는 코드를 제거할 수 있다! → vuex 깔끔하게 사용하기
참고
'JS > vue.js' 카테고리의 다른 글
vue14(computed,watch) (0) 2022.03.18 vue12(vue-router #,/#/ 제거하기) (0) 2022.03.16 vue11(redirect 리다이렉트 ) (0) 2022.03.15 에러6(.env에러/ELIFECYCLE/this is probably not a problem with npm) (0) 2022.03.15 vue10(동적 컴포넌트 component tag / 컴포넌트 갈아끼우기) (0) 2022.03.15