[typescript] 타입스크립트로 Vue 상태 관리하기 (Vuex)

15 Dec 2023

typescript

Vue.js는 강력한 기능과 간결한 문법으로 웹 애플리케이션을 개발할 수 있는 프레임워크 입니다. Vue 애플리케이션에서 상태 관리를 위해 Vuex를 사용하는 것은 일반적인 방법 중 하나입니다.

이 글에서는 타입스크립트로 Vue 애플리케이션에서 Vuex를 사용하는 방법에 대해 살펴보겠습니다.

Vuex란 무엇인가요?

Vuex는 Vue.js 애플리케이션의 상태관리 패턴 + 라이브러리 입니다.

Vuex를 사용하면, Vue 컴포넌트간의 상태를 공유 및 관리하거나 로컬 스토리지, 세션 스토리지 등을 통해 관리할 수 있습니다.

타입스크립트와 함께 Vuex 사용하기

1. Vuex 설치 및 설정

먼저, 프로젝트에 Vuex를 설치합니다.

npm install vuex --save

설치 후, 타입스크립트를 지원하기 위해 vuex에 대한 타입 정의 파일을 설치합니다.

npm install --save @types/vuex

2. 스토어 생성

다음으로, vuex 스토어를 생성합니다. 타입스크립트를 사용하면서 Vuex 스토어를 생성할 때, 모듈화된 방식으로 스토어를 작성할 수 있습니다.

예를 들어, counter 모듈을 작성할 때:

// counter.ts

import { Module, MutationTree, ActionTree } from 'vuex';

interface CounterState {
  count: number;
}

const state: CounterState = {
  count: 0
};

const mutations: MutationTree<CounterState> = {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  }
};

const actions: ActionTree<CounterState, any> = {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  }
};

export const counter: Module<CounterState, any> = {
  state,
  mutations,
  actions,
};

3. 루트 스토어 및 모듈 등록

루트 스토어에서 생성된 모듈을 등록합니다.

// store.ts

import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { counter } from './counter';

Vue.use(Vuex);

interface RootState {}

const store: StoreOptions<RootState> = {
  modules: {
    counter,
  },
};

export default new Vuex.Store(store);

4. Vue 애플리케이션에서 스토어 사용

마지막으로, Vue 애플리케이션에서 Vuex 스토어를 사용합니다.

// main.ts

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

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

마치며

이제 타입스크립트로 Vuex를 사용하는 방법을 알아보았습니다. 타입스크립트를 사용하여 Vuex를 사용하면, 강력한 타입 지원을 받으면서 상태 관리를 할 수 있습니다. Vuex를 사용하여 Vue 애플리케이션을 보다 예측 가능하고 유지보수가 용이하도록 개발할 수 있습니다.

더 자세한 정보는 Vuex 공식 문서를 참고하세요.