Vuex 사용하기

이번 포스팅은 실제 Vuex사용법에 대해서 알아보기로 한다.

Vuex 설치

npm install --save vuex

npm으로 Vuex를 설치 후 저장소가 될 js파일을 생성한다.(대부분 이것을 Vuex의 내부객체인 Store의 이름을 따와 store.js로 생성한다.)

//store.js
export const store = new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {}
});

Vuex에는 크게 4가지 속성이 있다.

• state : 여러 컴포넌트 간에 공유할 데이터(상태)
• getters : state값을 접근하는 속성이자 computed()처럼 미리 연산된 값을 접근하는 속성
• mutations : state의 값을 변경할 수 있는 유일한 방법이자 메서드
• actions : 비동기 처리 로직을 선언하는 메서드. 비동기 로직을 담당하는 mutations,
  데이터 요청, Promise, ES6 async와 같은 비동기 처리는 모두 actions에 선언

각 사용법을 코드로 살펴보자.

state

//Vue
data: {
    message: 'Hello Vue.js!'
}

// Vuex
state: {
    message: 'Hello Vue.js!'
}

<!-- Vue -->
<p>{{ message }}</p>

<!-- Vuex -->
<p>{{ this.$store.state.message }}</p>

getters

//store.js
state: {
    num: 10
},
getters: {
    getNumber(state) {
        return state.num;
    },
    doubleNumber(state) {
        return state.num * 2;
    }
}

<p>{{ this.$store.getters.getNumber }}</p>
<p>{{ this.$store.getters.doubleNumber }}</p>

mutations

//store.js
state: { 
    num: 10
},
mutations: {
   printNumbers(state) {
      return state.num
   },
   sumNumbers(state, anotherNum) {
      return state.num + anotherNum;
   }
}

// App.vue
this.$store.commit('printNumbers');
this.$store.commit('sumNumbers', 20);

mutations는 commit으로 실행이 가능하다.

actions

//store.js
state: {
   num: 10
},
mutations: {
   doubleNumber(state) {
      state.num * 2;
   }
},
actions: {
   // context로 store의 메서드와 속성 접근
   delayDoubleNumber(context) {
      context.commit('doubleNumber');
   }
}

//App.vue
this.$store.dispatch('delayDoubleNumber');

actions는 dispatch()로 실행이 가능하다.

이렇게 vuex의 사용법을 알아보았다.
다음 포스팅에서는 vuex의 방식으로 Todo-App을 리팩토링 해보자.

출처 인프런 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex