Vue - .vue 파일에서 commit 이용하기

기본적으로 Vuex를 사용하면 mutation을 이용한 action.js 파일에서 commit을 한다.

 

즉, API를 이용해 받은 response값을 commit으로 저장하여 getter를 호출해 가져오는 형태로 사용한다.

 

하지만 가끔 *.vue 파일에서 특정한 값을 저장해서 getter로 손쉽게 불러와야 하는 경우가 발생한다.

 

이때. 우리는 아래와 같이 쓴다

 

this.$store.commit("setData", this.data);

 

이미 main.js에 store가 선언되어 있고 setData라는 mutations을 사용하는 방법이다.

위 코드를 사용하면 setData 를 통해서 this.data 값이 미리 선언된 글로벌한(?) 변수에 저장이 되고 이를 getter를 이용해 가져다 쓸수 있게 되는 것.

 

다만 우리는 store를 하나로 퉁쳐서 관리하지 않고 기능에 맞게 디렉토리를 구분하여 사용하는 경우가 있다.

 

즉

 

module

ㄴ A.js

    ㄴ mutations.js

ㄴ B.js

    ㄴ mutations.js ( setData ) 

 

이렇게 구현된 디렉토리가 있고 B.js에 소속된 mutation.js 안에 setData를 사용하고 싶으면 아래와 같이 사용해야 한다.

 

this.$store.commit("B/setData", this.data);

 

즉 앞에 소속된 js값을 추가로 명시하여 사용해야 문제 없이 사용이 가능하다.