todolist 프로젝트 구조화/모듈화하기!

---

todolist 프로젝트 구조화/모듈화하기!

2022/09/15

 

1.vuex로 리팩토링

-git으로 브랜치 체크아웃할 때, 터미널에서 checkout vue/helpers -f로

변경한 이력이 있더라도 강제로 넘어갈 수 있음

 

2.프로젝트 구조화랑 모듈화

-store.js에서 코드 줄 수가 늘어날때, state와 mutations의 연결을 모를수도 있음

-store.js의 구조를 모듈화 할 수 있음

=>이제껏 만든 store.js 구조를 살펴보면 sotre.js 에서 vuex에서 import하고,

state, getters, mutations, actions로 정리하여 호출함

 

3.ES6의 import/export 이용하여 속성별 모듈화하기

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from ' store/getters.js'
import * as mutations from ' store/mutations.js'
import * as actions from ' store/actions.js'



export const store = new Vuex.Store({
	state: {},
    getters,
    mutatioans,
    actions

});

js파일을, getter, mutations, actions 따로추가

 

-store.js에 있는 getters 를 getters.js로 이동해주면된다

store.js에 있는 아래의 getters를

return state.todoItems

(*속성이로 써야하므로 화살표 함수로 연결해주기)

 

getters.js로 이동하자!

export const storedTodoItems = (state) => {
                 return state.todoItems;
}

 

-mutations도 동일하게, 속성으로 화살표 함수로 mutations.js로 옮겨주기

(*각각의 메소들을 잘 분리하여 화살표 함수로~!)

const addOneItem = (state,todoItem) => {
 const obj = { completed: false, item: todoItem };
             localStorage.setItem(todoItem, JSON.stringify(obj));
             state.todoItems.push(obj);
},

const removeOneItem = (state, payload) => {
       localStorage.removeItem(payload.todoItem.item);
             state.todoItems.splice(payload.index, 1);
},
        
const 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)
                        );
},

const clearAllItem = (state) => {
    localStorage.clear();
    state.todoItems = [];
}

 

export하기!

export { addOneItem, removeOneItem, toggleOneItem, clearAllItem}

 

-store.js로 import해준다

형식 import * as ~~~ from '폴더위치'

===store.js에 불러오기===
import * as mutations from './mutations.js'
import * as getters from './getters.js'
import * as actions from './actions.js'

- store.js에 기존에 있던 내용 삭제

===as-is===
         getters:{
             storedTodoItems(state){
                 return state.todoItems
             }
         },
         
         
===to=be===

getters: getters

 

결국 엄청나게 간략하게 변경되었다!

export const store = new Vuex.Store({
         state: {
           headerTitle: "Just do it",
           todoItems: storage.fetch()
         },
         getters:getters,
         mutations:mutaions,
        actions: actions
    }
         );

 

4.1개의 store로 관리가 어려울 만큼 앱이 커졌을 때는 modules로 관리

 

====store.js에서 ====

import Vue from 'vue'
import Vuex from 'Vuex'
import todo from 'modules/todo.js'

export const stroe = new Vuex.Store({
	modules: {
    	moduleA: todo, (모듈명: 모듈파일명)
        todo (ES6로 todo: todo
    }
})

===todo.js===
const state = {}
const getters = {}
const mutations = {}
const actions = {}

 

5.todolist 뷰 앱에서 modules 활용하기

-store 폴더 안에 modules 폴더 생성하기 > 그 안에 todoApp.js파일 생성하기

-store.js에서 todoapp을 불러오기

import todoApp from './modules/todoApp'

 

-export에 모듈 추가, todoApp추가

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

-state를 todoApp으로 이동 및, 형식에 맞게 변형

    const state = {
           headerTitle: "Just do it",
           todoItems: storage.fetch()
         };

-getters도 이동가능

===as-is===
export const storedTodoItems = (state) => {
                 return state.todoItems;
}


===to-be===

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

===>화살표함수를 제거해준다

-mutations도 이동 가능

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)
                        );
},

clearAllItem  (state) {
    localStorage.clear();
    state.todoItems = [];
}};

한번에 모든 값을 익스포트하기 위해서 변경

(*default는 1개의 파일에서 딱 1번만 익스포트 할 수 있음)

export default {state, getters,mutations}

 

결론!

modules사용 할때는 화살표 함수를 제거해야함.