[Vue3] Vue3에서 vuex4 store 모듈화(1)

Vue3를 통한 프로젝트 중 Store모듈화의 필요성을 느끼고 공부하게 되었다.

 

 

1. Vuex4 설치

npm install --save vuex@4.0.1

 

2. index.js에 다음과 같은 코드 작성

 

// src/store/index.js

const store = new Vuex.Store({
  modules: {
  },
});
export default store;

 

3. modules 라는 폴더에 각자 필요한 데이터들을 저장하고 사용할 파일생성

설명을 위한 예시, 파일이름은 자유

4. 자신이 사용할 파일에서 다음과 같은 스켈레톤 코드 입력

// src/store/modules/Member1.js

const Member1 = {
  namespaced: true,
  state: () => ({
  }),
  mutations: {},
  getters: {},
  actions: {},
};

export default Member1;

 

5. 해당 파일을 index.js에서 임포트

 

// src/store/index.js

import Vuex from 'vuex';

// 작성한 모듈을 가져오기
import Member1 from '@/store/modules/Member1.js';

const store = new Vuex.Store({
  modules: {
    Member1,
  },
});
export default store;

 

 

다음 포스팅에서는 모듈화한 데이터를 컴포넌트에서 사용하는법과 변경하는법을 알아보려고 한다.