웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS의 전역 상태 관리 방법으로 Vuex를 사용합니다. 만약 각각의 store 파일들이 다른 위치 및 경로에 저장되어 있는 경우 root에서 전역으로 commit이나 dispatch 등을 사용하여 actions와 mutations를 실행하는 방법에 대하여 간략하게 알아봅니다.
우선 다른 경로에 저장된 store 구조라면 아래와 같이 예를 들 수 있겠습니다. store 폴더 하위에 각각의 파일로 구성되지 않고 아래처럼 각각 하위 폴더 내부에 선언된 경우를 의미합니다.
보시는 것처럼 store 내부에 common, posts, auth 등등 각각의 목적에 따라 분류된 파일 경로 내부에 스크립트 파일이 존재하게 됩니다. 만약 posts 하위의 store의 함수 addNew() 에서 바로 위에 위치한 commons 경로의 메소드를 dispatch로 'common/showAlert'를 호출하려고 합니다. 이 경우 아래와 같이 코드를 작성하였다고 생각해봅니다.
@ /posts/index.js
위 코드는 잘 동작할까요? 실행해보면 정상 동작하지 않고 에러가 발생하게 됩니다. 호출 범위를 벗어났기 때문에 에러가 발생했는데요 ~~ 이런 경우 다른 위치의 store에 접근하기 위해서 옵션으로 { root: true }를 사용해야 합니다.
{ root: true }
store에서 { root: true }는 내부 store의 외부에 접근할 수 있는 옵션입니다. 이제 해당 옵션을 추가하여 호출하면 다음과 같이 코드를 수정할 수 있습니다.
이처럼 옵션을 사용하여 root 영역의 actions 또는 mutations를 호출할 수 있는 방법을 알아봤습니다.
[ 참고 ]
위에서는 root 영역에 접근하기 위해서 { root: true }를 추가하는 방법을 사용하였습니다. 만약 actions, mutations가 아니라 state 또는 getters인 경우에는 아래와 같은 인자를 사용하여 호출이 가능합니다.
이 점 참고하시기 바랍니다.
# vuex store 호출시 root의 commit, dispatch 실행하기
우선 다른 경로에 저장된 store 구조라면 아래와 같이 예를 들 수 있겠습니다. store 폴더 하위에 각각의 파일로 구성되지 않고 아래처럼 각각 하위 폴더 내부에 선언된 경우를 의미합니다.
/store
/common
/posts
/auth
...
보시는 것처럼 store 내부에 common, posts, auth 등등 각각의 목적에 따라 분류된 파일 경로 내부에 스크립트 파일이 존재하게 됩니다. 만약 posts 하위의 store의 함수 addNew() 에서 바로 위에 위치한 commons 경로의 메소드를 dispatch로 'common/showAlert'를 호출하려고 합니다. 이 경우 아래와 같이 코드를 작성하였다고 생각해봅니다.
@ /posts/index.js
const mutations = {
addNew(commit) {
commit('common/showAlert', { msg: 'Created !!!' })
}
}
addNew(commit) {
commit('common/showAlert', { msg: 'Created !!!' })
}
}
위 코드는 잘 동작할까요? 실행해보면 정상 동작하지 않고 에러가 발생하게 됩니다. 호출 범위를 벗어났기 때문에 에러가 발생했는데요 ~~ 이런 경우 다른 위치의 store에 접근하기 위해서 옵션으로 { root: true }를 사용해야 합니다.
{ root: true }
store에서 { root: true }는 내부 store의 외부에 접근할 수 있는 옵션입니다. 이제 해당 옵션을 추가하여 호출하면 다음과 같이 코드를 수정할 수 있습니다.
const mutations = {
addNew(commit) {
commit('common/showAlert', { msg: 'Created !!!' }, { root: true })
}
}
addNew(commit) {
commit('common/showAlert', { msg: 'Created !!!' }, { root: true })
}
}
이처럼 옵션을 사용하여 root 영역의 actions 또는 mutations를 호출할 수 있는 방법을 알아봤습니다.
[ 참고 ]
위에서는 root 영역에 접근하기 위해서 { root: true }를 추가하는 방법을 사용하였습니다. 만약 actions, mutations가 아니라 state 또는 getters인 경우에는 아래와 같은 인자를 사용하여 호출이 가능합니다.
doSomething({ state, getters, rootState , rootGetters }) {
...
}
...
}
이 점 참고하시기 바랍니다.
아래의 글도 찾고 계시지 않나요?
