[VueJS] Vuex란?

Vuex란

Vuex란 Vuejs 프레임워크에 사용할 수 있는 상태 관리 패턴이다. Vuex를 사용하면 해당 어플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며, 상태의 변경을 예측 가능해진다. 예를 들어 Spa 방식의 어플리케이션의 경우, 컴퍼넌트 방식으로 잘게 쪼개서 사용한다. 이 때 컴포넌트끼리의 관계 에서 자식 컴포넌트는 부모 컴포넌트의 state를 직접 변경 할 수 없다. 만약 자식 컴포넌트에서 부모 컴포넌트의 state를 변경하려면 일단 props를 이용하며 state를 내려 받고, 해당 값이 변경되면 $emit을 이용하여 부모 컴포넌트에게 인자로 변경된 값을 넘겨줘야 한다. 이러한 구조 속에서 어플리케이션의 규모가 커져, 부모-자식 컴포넌트의 관계가 많아질 경우 최상위에 부모 컴포넌트의 state의 값을 변경하기 위해 하위의 있는 자식들은 계속해서 인자로 넘겨줘야 한다는 비효율적인 코드가 늘어날 것이다.

Vuex의 위와 같은 데이터 흐름을 가진다.

  • State 는 어플리케이션의 기본적인 Data를 표현한다.
  • Mutations 는 상태의 동기적 변이를 담당하며, Vuex저장소에서 State를 변경할 수 있는 유일한 방법이다.
  • Actions 은 비동기적 작업이 포함되어 있으며, 변이에 대해 Mutations에 commit을 한다.

Vuex의 저장소 Store

모든 Vuex 어플리케이션에는 전체 어플리케이션의 상태를 보유하고 있는 store가 있다. 이 store를 Vue 컴포넌트가 바라보고 있으며, 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트 합니다. 이 Store는 직접적으로 변경할 수 없으며, 위에 말했던 Mutations을 통해서만 변경이 가능하여 모든 상태에 대한 추적이 기록에 남길 수 있습니다.

핵심 컨셉

사용자가 Action을 취했을 때, ActionsMutations에 commit을 통해 State를 변경한다. 그 후, State의 값이 변경이 되면 해당하는 컴포넌트가 다시 로딩된다.

상태 state

Vuex는 단일 상태 트리를 사용하며, 이는 각 어플리케이션 마다 하나의 저장소만 갖게 된다는 것을 의미한다. Vuex의 State를 가져오는 것은 computed를 통해 가져오면 된다. 이는 Vuex 저장소가 반응적이라는 특성 덕분에 가능하다.

state 접근 방법

  • this.$store.state 메소드를 통해 접근한다.
    • 해당 메소드를 사용하기 위해서는 최상위 루트 컴포넌트에 store 옵션을 추가해 주어야 한다.
// app.js
import { store } from './store/store.js';

new Vue({
    el: '#app',
    store,
    render: h => h(App)
});

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

// 해당 옵션을 사용해줘야 store옵션을 사용 가능함
Vue.use(Vuex);
  • mapState 헬퍼를 이용하여 접근한다.
//vuex에서 mapState라는 헬퍼를 받아옴
import { mapState } from 'vuex';

export deafult {
  computed: map
}

Comments