https://www.udemy.com/course/vue-router-composition-api/learn/lecture/33775802#content
애플케이션 상태나 데이터 관리 솔루션
provide/inject를 대체한다
- what & why
전역 상태 관리용 라이브러리
상태(state)란?
reactive data(반응형 데이터) : 변경 시 화면상의 무언가를 트리거하는 데이터, 애플리케이션에서 필요로 하는, 사용자가 보는, 변경
종류
-
local state
: 하나의 컴포넌트 내부에서 관리되는 데이터, 상태 (해당 컴포넌트에만 영향)
: 자식 컴포넌트에 영향 가능 (props 이용) -
global state (vueX)
: 앱 전체에 걸쳐 영향을 주고 받는 데이터
ex. 사용자 로그인 상태, 장바구니 상태 등
: 예측할 수 없는 동작(어디서 변경되고 있는지 확인하기 어려움), error-prone
원래 사용한 함수
-
provide
-
inject
-
컴포넌트와 분리된 곳에서 상태 관리
-
더 예측 가능한 상태 관리
-
data flow를 더 명확하게 정의해 에러 감소 가능
Fat Components
: App.vue (or similar components) contain lots of data and login
Unpredictable
: not always obvious where data(state) gets changed in which way
Error-prone
: accidental or missed state updates are possible
with Vuex
: outsourced state management
: predictable state management/flow
: clearly defined data flow
store
: one store per app
: 여러 state는 가질 수 있다
import {createStore} from 'vuex';
const store = createStore({
state(){
return {
counter:0;
};
}
})Vuex
어디에서도 상태를 바꿀 수 있고 전적으로 우리에게 달려있다
이렇게 오류가 발생할 수 있다
상태 변화 메커니즘이 없기 때문에
data flow가 예상 가능해야 하는데 상태를 어디서든 변경할 수 있으니까 별로 안 좋음
그러므로 직접 연결해서 하는 게 아니라 상태
mutations
앱 전반에 걸친 저장소에 컴포넌트를 통해 데이터 업데이트
직접 하는 게 아니라 mutations 통해 (state update할 수 있는 애들)
컴포넌트 내부에서 직접 상태 변경X/ mutation을 통해 그러므로 무조건 같은 방식으로 된다는 것을 볼 수 있다
- understand and using vuex
