[JavaScript 문법] 47일차: Vuex 상태 관리

Vuex란?

Vuex는 Vue.js 애플리케이션의 상태 관리를 위한 중앙 집중식 저장소를 제공하는 상태 관리 패턴 라이브러리입니다. Vuex는 상태(state), 뮤테이션(mutations), 액션(actions), 게터(getters)와 같은 개념을 통해 상태를 관리합니다.

Vuex 설치

Vuex를 사용하기 위해 Vuex 패키지를 설치합니다.

npm install vuex --save

상태 관리의 주요 개념

1. 상태(state): 애플리케이션의 상태를 나타내는 객체입니다.
2. 뮤테이션(mutations): 상태를 변경하기 위한 동기 메서드입니다.
3. 액션(actions): 상태를 변경하기 위한 비동기 작업을 포함한 메서드입니다.
4. 게터(getters): 상태를 반환하는 계산된 속성입니다.

Vuex 설정

Vuex를 설정하여 상태를 관리하는 기본 스토어를 생성합니다.

예제: Vuex 설정

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    decrement({ commit }) {
      commit('decrement');
    }
  },
  getters: {
    count: state => state.count
  }
});

Vue에서 Vuex 사용

Vuex 스토어를 Vue 애플리케이션에 제공하여 상태를 관리합니다.

예제: Vue에서 Vuex 사용

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

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

예제: 컴포넌트에서 Vuex 상태 사용

// Counter.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.count;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    },
    decrement() {
      this.$store.dispatch('decrement');
    }
  }
};
</script>

// App.vue
<template>
  <div id="app">
    <h1>Vuex Counter</h1>
    <Counter />
  </div>
</template>

<script>
import Counter from './Counter.vue';

export default {
  components: {
    Counter
  }
};
</script>

모듈화

Vuex는 애플리케이션의 상태 관리가 커질 때 모듈화를 통해 상태, 뮤테이션, 액션, 게터를 분리할 수 있습니다.

예제: 모듈화된 Vuex 설정

// store/modules/counter.js
const state = {
  count: 0
};

const mutations = {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  }
};

const actions = {
  increment({ commit }) {
    commit('increment');
  },
  decrement({ commit }) {
    commit('decrement');
  }
};

const getters = {
  count: state => state.count
};

export default {
  state,
  mutations,
  actions,
  getters
};

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

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    counter
  }
});

결론

Vuex는 Vue.js 애플리케이션의 상태를 중앙 집중식으로 관리하는 강력한 도구입니다. 이번 글에서는 Vuex의 기본 개념, 상태, 뮤테이션, 액션, 게터, 모듈화에 대해 배웠습니다. 다음 글에서는 Angular 상태 관리에 대해 알아보겠습니다.

다음 글에서 만나요!