Vuex스토어 속성 모듈화 방법

인프런 - vue.js 캡틴판교 강의

인프런 - vue.js 캡틴판교 강의

 

기존 store.js

import { createStore } from "vuex";

const storage = {
    item(){
        const arr = [];
        if(localStorage.length > 0){     
            for(var i = 0; i < localStorage.length; i++){
                arr.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); 
            }
        }
        console.log(arr);
        return arr;
    }
}

export const store = createStore({
    state: {
        todoItems : storage.item()
    },
    getters: {
        storedTodoItems(state){
            return state.todoItems
        }
    },
    mutations : {
        addOneItem(state,todoItem){
            var 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);
        },
        toggelOneItem(state, payload){
            console.log(payload.index);
            state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed;
            localStorage.removeItem(payload.todoItem.item);
            localStorage.setItem(payload.todoItem.item,JSON.stringify(payload.todoItem));
        },
        clearTodoItems(state){
            localStorage.clear();
            state.todoItems = [];
        }
    },
    
})

 

 

이제 모듈화를 할 차례이다. 나는 각각 store의 vuex 함수 단위로 모듈화 했다.

mutations.js

const addOneItem = (state,todoItem) => {
    var 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 toggelOneItem = (state, payload) => {
    console.log(payload.index);
    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 clearTodoItems = (state) => {
    localStorage.clear();
    state.todoItems = [];
}

export { addOneItem, removeOneItem, toggelOneItem, clearTodoItems }

각각 함수를 빼준 뒤에

 

store.js

import * as getters from './getters';
import * as mutations from './mutations';

import를 할 때는 전체 함수를 빼와야 하니 *로 넣고 as 별칭을 붙여준다.

 그리고 getters에 넣어주면 된다.

export const store = createStore({
    state: {
        todoItems : storage.item()
    },
    getters: getters,

다른 것도 같은 방식이다. 처음보는 나로써 생각하기로 각각 기능단위로 store를 만들 수 있을 것 같다.

import { createStore } from "vuex";
import * as getters from './getters';
import * as mutations from './mutations';

const storage = {
    item(){
        const arr = [];
        if(localStorage.length > 0){     
            for(var i = 0; i < localStorage.length; i++){
                arr.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); 
            }
        }
        console.log(arr);
        return arr;
    }
}

export const store = createStore({
    state: {
        todoItems : storage.item()
    },
    getters: getters,
    mutations : mutations
})

 

export const store = createStore({
    state: {
        todoItems : storage.item()
    },
    getters,
    mutations 
})

축약도 가능하다.

 

---

이제 완전한 스토어 모듈화를 들어가겠다.

 

store 폴더 안에 modules 라는 폴더를 만들었다.

 

const state,getters,mutations를 각각 만들어 주었다.

 

 

const storage = {
    fetch(){
        const arr = [];
        if(localStorage.length > 0){     
            for(var i = 0; i < localStorage.length; i++){
                arr.push(JSON.parse(localStorage.getItem(localStorage.key(i)))); 
            }
        }
        console.log(arr);
        return arr;
    }
};
const state =  {
    todoItems : storage.fetch()
}
const getters = {
    storedTodoItems(state) {
        return state.todoItems
    }
}
const mutations = {
    addOneItem(state,todoItem){
        var 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);
    },
    toggelOneItem(state, payload){
        console.log(payload.index);
        state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed;
        localStorage.removeItem(payload.todoItem.item);
        localStorage.setItem(payload.todoItem.item,JSON.stringify(payload.todoItem));
    },
    clearTodoItems(state){
        localStorage.clear();
        state.todoItems = [];
    },
}

export default {
    state,
    getters,
    mutations
}

 

그리고

 

store.js

import { createStore } from "vuex";
import todoApp from './modules/todoApp';

export const store = createStore({
    modules : {
        todoApp
    }
})

 

이렇게 store에 등록해서 사용하면 된다.