익명의 개발노트

Vuex를 사용하다보면, 내가 사용하는 쪽에서 Vuex 상태관리 내용을 보고 싶을 때, 크롬 Vuex extenstion을 설치해서 확인하는데, 이 익스텐션에서 아래와 같이 Load State를 눌러가면서 확인해야하는 번거로움이 있다. 이럴때 사용하고자하는 페이지에 mapGetters를 사용하지 않아도 아래와 같이 선언을 해주면, import { mapGetters } from 'vuex'; export default { computed:{ ...mapGetters(['사용하고자하는 store이름']) }, ... } 아래와 같이 vuex bindings 라는 상태창에서 실시간으로 확인할 수 있다. 굳이 vuex 탭가서 확인할 필요가 없다.

Vuex 구조 index.ts ├─ ModuleCreateTheme.store.ts ├─ ModuleEditTheme.store.ts └─ ModuleUserInfo.store.ts 각 모듈별 똑같이 getters 를 아래와 같이 작성했다. getters: { getAllState: state => state, } getters를 사용하고자 하는 컴포넌트에서 불러온다. this.$store.getters['moduleUserInfo/getAllState'] // this.$store.getters[네임스페이스, 함수명] 기존에는 getters를 사용할때 computed에 ...mapGetters를 선언하고 사용했는데, 바로 사용이 가능하다. 추가적으로 모듈화된 내용에 action이나 mutation을 하..