vue store 모듈화 하는법 및 사용법

해당 글은 이미 존재하는 코드를 이해하는 과정에서 정리한 것인데, 내가 놓치고 정리하지 못한 부분이 있을 수 있음. 그래서 개념 이해용으로만 사용해야함. 

 

모듈화 하는 법

 

1. main.js에 아래처럼 store폴더를 import (폴더를 import하면 index.js를 찾아가는 듯)

 

2-1. index.js에 아래의 왼쪽처럼 코드 추가함 (왼쪽방법 사용함, 오른쪽은 다른 방법 예시)

왼쪽처럼 하면 modules폴더의 데이터를 modules변수에 자동으로 넣는 반면 오른쪽처럼 하면 폴더넣을때마다 매번 작업해줘야함.

2-2. index.js에 modules넣음(getters는 다른 곳에 필요함)

 

3. store의 modules폴더에 아래처럼 store폴더를 넣어둠

 

모듈화한 store 사용법

 

- 위의 app.js에 있는 state를 사용한다고 했을 때 예시

 

대충 위와같은 데이터가 있을 때

 

this.$store.state.app.NewNodeInfo라고 하면 위의 state가 가져와진다.

참고로 모듈화 안 된 경우 $store.state.NewNodeInfo의 형식으로 가져온다.

 

- 위의 app.js에 있는 actions를 사용한다고 했을 때 예시

 

app.js의 actions

 

$store의 dispatch를 통해 app.js에 있는 actions중에서 inputnodeInfoData를 호출함. 

그러면 inputNodeInfoData는 mutations를 호출하고 그 mutations가 state를 변형시킴.