Vuex - 폴더 구조화 & Namespacing

Vuex - 폴더 구조화 & Namespacing

---

애플리케이션의 크기가 어느정도 커지기 시작했을 때, getters & mutations & actions의 이름을 고유하게 정하지 않으면 namespace 충돌이 발생한다.

네임스페이스를 구분하기 위해 속성명.js로 각 속성의 이름들을 파일 단위로 나누고 store.js와 각 컴포넌트에 import하여 사용하는 방법이 있다.

폴더 구조화 (모듈화)를 하는 방법을 알아보자.

1. 폴더에서 속성명.js 형태로 파일을 생성한다.

2. 각 속성명.js 파일에 속성들을 객체로 정의하고 export로 모듈로 사용할 수 있도록 지정한다.

3. export한 모듈 파일들을 store.js에서 import하여 사용한다.

참고 - 

https://joshua1988.github.io/web-development/vuejs/vuex-actions-modules/