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

안녕하세요 강사님

중급강의 스토어 모듈화까지 마치고 정상작동을 확인 한 후

터미널에서 프로젝트를 재실행 하였지만

오류로 인해 TodoList, TodoInput 등 작동 되지 않습니다.

오류는 다음과 같고

main.js와 store.js, todoApp.js 모두 import가 올바른 경로로 되어있습니다.

main.js

import Vue from 'vue'
import App from './App.vue'
import { store } from './store/store.js'

new Vue({
  el: '#app',
  store : store,
  render: h => h(App),

})

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import todoApp from './modules/todoApp.js'

Vue.use(Vuex);

export const store = new Vuex.Store({
	modules : {
		todoApp
	}
});

todoApp.js

const storage = {
    fetch(){
        const arr = [];
        console.log('created')
        if(localStorage.length > 0 ){
            for(let i = 0; i < localStorage.length; i ++){
                if (localStorage.key(i) !== 'loglevel:webpack-dev-server'){
                    arr.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
                }
            }
        }
        return arr;
    }
}

const state= {
    todoItems: storage.fetch()
};

const getters = {
	getTodoItems(state) {
    return state.todoItems;
	}
};

const mutations= {
        addOneItem(state, todoItem) {
        const obj = {completed: false, item: todoItem}
        localStorage.setItem(todoItem, JSON.stringify(obj));
        state.todoItems.push(obj);
    },
       removeOneItem(state, payload){
        localStorage.removeItem(payload.todoItem.item);
        state.todoItems.splice(payload.index,1);
    },
       toggleOneItem(state, payload){
        state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed;
        localStorage.removeItem(payload.todoItem.item);
        localStorage.setItem(payload.todoItem.item, JSON.stringify(payload.todoItem));    
    },
       clearAllItems(state){
        localStorage.clear();
        state.todoItems=[];
    }
};

    export default{ 
        state,
        getters,
        mutations
    }