<Vuex> Vuex 시작하기

Vuex 설치

$npm install vuex

폴더 및 파일 생성

일반적으로 아래와 같이 폴더를 구조를 갖고 파일을 생성하는것이 일반적입니다.

|--src
  |--store
    |-- store.js

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

src / main.js

(...)
import { store } from './store/store';
 
new Vue({
  el: "#app",
  store,
  render: h => h(App)
})

state

사용 예시

data를 사용하듯이 state를 정의해주고 this.$store.state를 통해 접근하여 해당하는 값을 사용할 수 있습니다.

// store.js
state: {
  messgae: "hello world"
}

// App.vue
<span>{{ this.$store.state.message }}</span>

getters

state값에 접근하는 속성이자 computed()처럼 미리 연산된 값을 접근하는 속성

• getters는 첫번째 인자로 store의 state를 받습니다.

사용 예시

// store.js
export const store = new Vuex.store({
  state: {
    message: "hello",
    name: "world"
  },
  getters: {
    getMessage(state) {
      return state.message;
    }
    getGreet(state) {
      reutrn state.message + state.name;
    }
  }
})

// App.vue
<h1>{{ this.$store.getters.getGreet }}</h1>

mutations

• state의 값을 변경할 수 있는 유일한 메서드
• mutations는 첫번째 인자로 store의 state를 받습니다.
• commit()을 통해 접근하여 메서드를 호출합니다.
  인자로 메서드명을 문자열로 전달하면 일치하는 메서드가 실행됩니다.
• commit()의 두번째 인자는 객체로 전달해주어야 합니다.

사용 예시

// store.js
export const store = new Vuex.store({
  state: {
    num: 10
  },
  mutations: {
    modifyNum(state, payload) {
      console.log(payload.str);
      return state.num += payload.num;
    }	
  }
})

// App.vue
this.$store.commit("modifyNum", {
  str: "hello world",
  num: 10
});

왜 Mutations를 통해 state에 접근해야 할까?

• Mutations를 이용하지 않으면 어느 component가 state를 변경했는지 추적하기 어렵고 반응성이 떨어진다.
• 개발자 도구를 통한 개발 이점.

actions

• actions는 첫번째 인자로 store의 state를 받습니다.
• 비동기 처리 로직을 처리하는 메서드(Mutations의 비동기 버전)입니다.

사용 예시

주의! 아래 예시는 실제로 동작하진 않습니다.

// store.js
export const store = Vuex.Store({
  state: {
    num: 10
  },
  mutations: {
    modifyNum(state, payload) {
      console.log(payload.str);
      return state.num += payload.num;
    }	
  },
  actions: {
    delayModifyNum(state) {
      //외부에서 $store.commit과 동일
      setTimeout(() => {
        context.commit("modifyNum");
      }, 1000);
    }
  }
})

// App.vue
// actions delayModifyNum을 호출
this.$store.dispatch("delayModifyNum");

참고

• 캡틴 판교 inflearn 중급 강의