mapState 관련

Question

모듈화를 하고 나니 헤더 텍스트가 안나오더군요... 그래서 일단은 커뮤니티 답변을 보고 참고해보았지만 안됩니다. export const store = new Vuex.Store({ modules:{ totoApp } }); store.js에 일단 이렇게 todoApp이 들어가 있고요. const state = { headerTxt:' ~ header ~ ', todoItems: storage.fetch() } export default { state, getters, actions, mutation } 요거는 todoApp.js 중에서 발췌. 잘 들어가 있죠. 1. template 코드 안에 {{ this.$store.state.todoApp.headerTxt }} 로 일단 해봤습니다. 안 나옵니다... 2. template 안의 코드를 {{ this.headerTxt }} 로 변경하고, import { mapState, mapGetters } from 'vuex' export default { computed:{ ...mapState({ headerTxt: state => state.todoApp.headerTxt }), ...mapGetters(['getHeaderTxt']) } } 안나옵니다. 그런데 이상한 것은 getters로 접근해서 {{ this.getHeaderTxt }} 로 코드를 짜면 나온다는 것입니다. 왜 이러는 걸까요? 개발자도구 Vuex에는 totoApp:Object headerTxt:" ~ header ~ " todoItems:Array[2] 이렇게 제대로 뜹니다.

캡틴판교 · Answer

안녕하세요 Hyun님, 모듈화 하실 때 namespaced: true를 넣어보시겠어요? 안되시면 강의에서 다룬 코드 보시고 작성하신 코드 다시 한번 비교해 보시면 좋을 것 같습니다 :)