mapState 관련

모듈화를 하고 나니 헤더 텍스트가 안나오더군요...

그래서 일단은 커뮤니티 답변을 보고 참고해보았지만 안됩니다.

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]

이렇게 제대로 뜹니다.

인프런 커뮤니티 질문&답변