[javascript] Vue.js와 Vuex를 이용한 복잡한 상태 관리

01 Dec 2023

javascript

Vue.js는 사용자 인터페이스를 구축하기 위한 진보적이고 유연한 JavaScript 프레임워크입니다. Vue.js는 컴포넌트 기반 아키텍처로 구성되어 있으며, 각 컴포넌트는 자체 상태를 가지고 있습니다. 그러나 애플리케이션의 규모가 커질수록 상태 관리가 어려워집니다. 이럴 때, Vuex를 사용하여 복잡한 상태 관리를 할 수 있습니다.

Vuex 소개

Vuex는 Vue.js 애플리케이션의 중앙 집중식 상태 관리 도구입니다. Vuex는 여러 컴포넌트 간의 공유 상태를 관리하는 데 사용됩니다. Vuex는 상태, 변이, 액션, 게터와 같은 개념들로 구성되어 있습니다.

상태 (State): Vuex의 상태는 애플리케이션의 전역 상태를 나타냅니다. 컴포넌트 간에 공유되는 데이터를 저장하는 곳입니다.
변이 (Mutation): 변이는 상태를 변경하는 동기적인 작업입니다. 변이는 오직 변이 함수 내에서만 실행될 수 있으며, 상태를 수정하는 역할을 합니다.
액션 (Action): 액션은 변이와 비슷하지만, 비동기적인 작업을 수행할 수 있습니다. 주로 비동기 작업이 필요한 API 호출이나 데이터 처리 로직을 포함합니다.
게터 (Getter): 게터는 상태를 계산하여 반환하는 함수입니다. 읽기 전용 계산된 상태를 제공합니다.

Vuex의 사용

먼저, Vuex를 설치해야 합니다. 프로젝트 폴더에서 다음 명령을 실행합니다.

npm install vuex

Vuex를 사용하기 위해 Vue 앱에 Vuex를 등록해야 합니다. main.js 파일에서 다음과 같이 작성합니다.

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});

new Vue({
  store,
  // ...
}).$mount('#app');

이제 Vuex를 사용하여 상태를 관리할 수 있습니다. 다음은 Vuex를 사용하여 상태를 변경하는 방법입니다.

// 변이 (Mutation)를 호출하여 상태 변경
this.$store.commit('increment');

// 액션 (Action)을 호출하여 비동기 작업 수행 후 상태 변경
this.$store.dispatch('incrementAsync');

Vuex의 상태와 게터를 사용하는 방법은 다음과 같습니다.

// 상태 조회
console.log(this.$store.state.count);

// 게터 호출
console.log(this.$store.getters.doubleCount);

이제 복잡한 상태 관리를 위해 Vuex를 사용할 수 있게 되었습니다. Vuex는 Vue.js 애플리케이션의 관리 상태를 조직화하고 확장하기 위한 강력한 도구입니다. Vuex의 공식 문서를 참고하여 자세한 내용을 확인할 수 있습니다.

참고 자료

Vuex 공식 문서
Vue.js 공식 문서