Vuex 사용예 : 단계별

예제를 간소화하여 단계별로 설명드릴게요.

목표:

이 예제는 Vuex를 사용해서 Vue 컴포넌트에서 상태를 관리하고, 변이(Mutation)와 액션(Action)을 호출하는 간단한 예제입니다.

---

1. 기본적인 Vuex 스토어 설정

먼저, Vuex는 상태 관리를 위해 사용됩니다. 상태는 애플리케이션의 데이터입니다. 이 데이터를 관리하는 방법으로 state, mutation, action, getter를 사용합니다.

간단한 Vuex 스토어를 설정해보겠습니다.

store.js (Vuex 스토어 정의)

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

// Vuex 사용하기 위해서 Vue에 등록
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0, // 상태: 카운트 변수
  },
  mutations: {
    increment(state) {
      state.count++; // 카운트를 1 증가시킨다
    },
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment'); // 1초 후에 increment 변이를 호출
      }, 1000);
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2; // 카운트 값을 2배로 반환하는 getter
    },
  },
});

• state는 애플리케이션의 데이터를 저장합니다. 여기서는 count라는 변수만 있습니다.
• mutations는 동기적으로 상태를 변경하는 메서드입니다. 여기서는 increment라는 메서드가 count를 1 증가시킵니다.
• actions는 비동기 작업을 처리하는 메서드입니다. incrementAsync는 1초 후에 increment 변이를 호출합니다.
• getters는 상태에 기반한 계산된 값을 반환합니다. 여기서는 count의 두 배인 doubleCount를 반환합니다.

---

2. Vue 컴포넌트에서 Vuex 상태 사용하기

이제 Vue 컴포넌트에서 Vuex 상태를 사용하려면, mapState, mapMutations, mapActions, mapGetters를 사용합니다. 이를 통해 Vuex의 상태, 변이, 액션, getter를 컴포넌트의 computed나 methods에 연결할 수 있습니다.

App.vue (Vue 컴포넌트)

<template>
  <div>
    <p>Count: {{ count }}</p> <!-- Vuex 상태에서 가져온 count -->
    <p>Double Count: {{ doubleCount }}</p> <!-- Vuex getter에서 가져온 doubleCount -->
    <button @click="increment">Increment</button> <!-- increment 변이 호출 -->
    <button @click="incrementAsync">Increment Async</button> <!-- incrementAsync 액션 호출 -->
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    // Vuex 상태 및 getter를 computed 속성으로 매핑
    ...mapState(['count']), // count 상태를 가져옴
    ...mapGetters(['doubleCount']), // doubleCount getter를 가져옴
  },
  methods: {
    // Vuex 변이와 액션을 methods로 매핑
    ...mapMutations(['increment']), // increment 변이를 메서드로 가져옴
    ...mapActions(['incrementAsync']), // incrementAsync 액션을 메서드로 가져옴
  },
};
</script>

설명:

1. mapState:
   • mapState(['count'])는 Vuex 스토어의 state에서 count 값을 가져와 컴포넌트의 computed 속성에 연결합니다.
   • this.count로 count 값을 컴포넌트에서 사용할 수 있게 됩니다.
2. mapGetters:
   • mapGetters(['doubleCount'])는 Vuex의 getter에서 doubleCount 값을 가져와 computed 속성에 연결합니다.
   • this.doubleCount로 doubleCount 값을 사용할 수 있게 됩니다. doubleCount는 state.count * 2로 계산된 값입니다.
3. mapMutations:
   • mapMutations(['increment'])는 Vuex의 mutation인 increment를 컴포넌트의 methods로 연결합니다.
   • this.increment()를 호출하면 Vuex의 mutation이 실행되어 count가 1 증가합니다.
4. mapActions:
   • mapActions(['incrementAsync'])는 Vuex의 action인 incrementAsync를 컴포넌트의 methods로 연결합니다.
   • this.incrementAsync()를 호출하면 1초 후에 count가 증가하는 비동기 작업이 실행됩니다.

---

3. 실행 흐름

• 처음에 count는 0입니다.
• Increment 버튼을 클릭하면 increment 변이가 실행되어 count가 1 증가합니다.
• Increment Async 버튼을 클릭하면 incrementAsync 액션이 실행되어, 1초 후에 count가 1 증가합니다.
• doubleCount는 항상 count * 2의 값을 보여줍니다.

예시 실행:

1. 처음 페이지가 로드되면, count는 0, doubleCount는 0입니다.
2. Increment 버튼을 클릭하면, count가 1이 되고, doubleCount는 2로 업데이트됩니다.
3. Increment Async 버튼을 클릭하면, 1초 후 count가 2가 되고, doubleCount는 4로 업데이트됩니다.

---

이와 같이, Vuex를 사용하면 상태 관리가 중앙에서 이루어지고, Vue 컴포넌트는 그 상태를 손쉽게 사용할 수 있습니다. mapState, mapMutations, mapActions, mapGetters는 Vuex와 Vue 컴포넌트 간의 연결을 매우 간단하게 해줍니다.

... (스프레드 연산자)

• ...은 스프레드 연산자입니다. ...은 객체나 배열을 펼쳐서 사용하거나, 다른 객체를 합칠 때 사용됩니다.
• 이 코드에서는 mapState, mapGetters, mapMutations, mapActions와 함께 사용되어 Vuex의 상태(state), 변이(mutations), 액션(actions), 그리고 계산된 속성(getters)을 Vue 컴포넌트의 computed나 methods에 매핑합니다.