vue3에서-타입스크립트로-vuex4-사용하기

vue3환경에서 타입스크립트로 vuex를 사용하는 방법을 정리해보았다. 먼저, vuex4를 설치한다.

$ npm install vuex@next --save

1. 기본 준비

1) main.ts에 스토어를 세팅한다

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");

store를 import한 뒤 store를 사용한다고 설정한다.

2) store 폴더를 생성한다.

src에 store 폴더를 생성한다. vuex를 기능별로 모듈화해서 구현할 것이기 때문에 다음과 같은 폴더 구조를 가지고 있다.

• store
  • modules
    • moduleA.ts
    • moduleB.ts
  • index.ts