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

앗..해결했습니다.

const storage = {
    fetch() {
        const arr = [];
        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))));
                    arr.sort(function(a,b){ //sort 추가
                        if(a.key > b.key){
                            return 1;
                        }
                        if(a.key < b.key){
                            return -1;
                        }
                        return 0;
                    });
                }
            }
        }
        return arr;
    },
};

export const store = new Vuex.Store({
    state: {
        todoItems: storage.fetch(),
        num: 1 // num을 추가!
    },
    mutations: {
        addOneItem(state, todoItem) {
            const obj = {completed: false, item: todoItem, key: state.num};
            localStorage.setItem(todoItem, JSON.stringify(obj));
            
            if(!state.todoItems.some(element => element.item == todoItem)){
                state.todoItems.push(obj);
                state.num++ //num값 하나씩 플러스
            }else{
                alert('이미 같은 내용이 있습니다!🐅');
            }
        },
        removeOneItem(state, payload){
            localStorage.removeItem(payload.todoItem.item);
            state.todoItems.splice(payload.index, 1);
            state.num-- //num값 하나씩 마이너스
        },
        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 = [];
            state.num = 1; //num값 1로 초기화
        }
    },
});

1. state에 num을 만들어 숫자 1을 추가했고

2. addOnItem이 실행될 때 추가되는 obj에 key값을 추가한 뒤

3. add를 완료한 후에는 num++,
   remove를 완료한 후에는 num--,
   모두 지울 경우에는 num = 1로 초기화시켜주니
   

새로고침을 해도 처음 작성한 순서 그대로 나오네요.
(사용자가 작성한 순서가 바뀌지 않았으면 했거든요..)
dev툴 Application을 확인하면 key 값의 순서는 여전히 뒤죽박죽이지만 (이 부분은 브라우저에서 바꾸는 거라 저희가 못하는 부분이라고 하신 걸로 기억하는데 맞죠?)

말씀해주신 sort API를 활용하니 구현해냈습니다..!
2시간 가량 걸렸지만 스스로 해결하니 정말 뿌듯하네요..😂