[Vuejs] vuex 에서 "namespaced" 의 중요성

 

vuex에서 여러개의 store를 사용하려면 1개의 기본이라 할 수 있는 스토어(store) 객체를 만들고 모듈(modules) 라는 속성에 만들어준 store를 추가하면 됩니다.

아래는 샘플 사진 입니다.

2개의 store 객체가 이렇게 추가 되었습니다.

 

여기서 아무 생각이 없었던 것이 바로 저 네임스페이스(namespaced) 항목 이였습니다.

아에 스토어(store) 객체에 추가조차 안했었습니다.

간단한 샘플 코드에서도 크게 언급을 안했었으니까요..   * 공식문서에는 설명이 나와있었죠..ㅠ

네임스페이스의 디폴트 값은 거짓(false)이며 해당 값이 true 와 false 인 경우에 차이는 분명 했습니다.

먼저 네임스페이스(namespaced) 속성을 주지 않는 경우에 헬퍼로 불리우는 맵뮤테이션(mapMutations)의 모습 입니다.

사용법이 매우 간단 합니다.

 

네임스페이스를 주지 않으면 mapMutations 함수에 매핑하는 방법은 매우 간단합니다.

원하는 뮤테이션 함수를 넣어주면 되는데....

위 사진처럼 각각의 스토어 객체에서 뮤테이션의 함수 이름이 같으면 문제가 발생 합니다.

아래 사진은 실제 동작해본 모습 입니다.

둘다 실행 됩니다.

 

이름이 같아 버린 뮤테이션의 함수가 둘다 실행 되 버리는 것을 볼 수 있습니다.

이러할 경우에 원하지 않는 함수가 동작해 버리는 불쌍사가 생길수 있기에..

가져올 스토어 객체를 지정하여 보겠습니다.

키 값으로 이름을 넣어주어야 합니다.

 

요렇게 가져올 스토어객체를 지정하고 뮤테이션함수를 한번 실행 해 보면..

좋은 결과를 예상했지만 오류가 발생합니다.

네가 가져오려는게 뭔질 모르겠는데??

 

스토어 객체의 네임스페이스(namespaced) 를 설정하지 않아서 매핑할 수 없다는 오류 입니다.

왜냐하면 해당 값이 false 이거나 아에 선언조차 안했으니까요.

그러면 이제 네임스페이스(namespaced)를 참(true)으로 설정하여 줍니다.

false에서 true로..

 

실행하여본 결과는 오류없이 정상적으로 동작하는 것을 볼 수 있습니다.

잘 됩니다!!

 

핼퍼 객체를 사용하지 않고 사용해야되는 스토어 객체가 단일인 경우라면 사실 굳이 하지 않아도 됩니다.

그러나 스토어 객체가 n개인 경우에는 각각의 내부에 선언한 뮤테이션(mutations), 액션(actions)의 함수 이름을 약속에 맞추어 절대 같지 않게 할 수는 없기에 가급적이면 네임스페이스(namespaced) 값을 참(true)로 하는 것을 잊지 말아야 하겠습니다.

* 그런데 게터스(getters)는 네임스페이스 뭐 그런거 상관없이 지정 잘 되더라구요...

 

이상으로 vuex 에서 네임스페이스(namespaced) 의 중요성에 대해서 작성 해 보았습니다.

틀린부분 또는 다른 의견은 언제든 환영 입니다! 👻