스토어 모듈화 시 ...mapState

mapState('모듈 명') 을 이용하기 위해선, 모듈을 export할 때 namespaced: true, 옵션을 지정해줘야 하는 것 같습니다.

modules/todoApp.js

TodoHeader.vue

이렇게 변경하고 나면 TodoList 등 helper함수를 이용한 다른 파일들도 위와 동일한 형식으로 변경해 주어야 합니다.

특히 TodoInput.vue에서

        this.addOneItem(this.newTodoItem);로 변경해 주어야 정상 작동합니다.

* 정확하지 않은 정보일 수 있습니다. 아니라면 댓글 달아주세요!

저는 todoApp.js 모듈에 있는 headerText를 전달해주는 getters 함수를 하나 만들어서 전달하는 방식으로 해결했어요!
storedTodoItems() 로 todoItems를 전달해서 리스트를 뿌려준 것처럼요.

// todoApp.js
const state = {
  headerText: 'My TODO',
  todoList: storage.fetch(),
};

const getters = {
  getHeaderText(state) {
    return state.headerText;
  },
  storedTodoItems(state) {
    return state.todoList;
  },
};

// TodoHeader.vue
<template>
  <header>
    <h1>{{ this.headerText }}</h1>
  </header>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters({
      headerText: 'getHeaderText',
    }),
  },
};
</script>

저는 간단하게 todoApp.js 에서 적용한 

headerText : 'TODO it!',

이 부분을 store.js 에 적용했습니다.

export const store = new Vuex.Store({

  state: {

    headerText : 'TODO it!',

  },

그러면 다른 설정없이 제대로 보여지네요..!

안녕하세요 Aredra님, 먼저 좋은 강좌라고 말씀해주셔서 감사합니다 :)

질문 주신 mapState는 모듈화를 했을 때 아마 아래와 같은 패턴으로 접근될 것 같습니다.

...mapState('모듈 명', ['state 이름'])

자세한 내용은 아래 문서를 한번 참고해보세요 :)

https://vuex.vuejs.org/guide/modules.html

강의 수강해주셔서 감사합니다..!