반응형
<store.js>
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as mutations from './mutations'
//use 는 vue의 플러그인, vue를 사용할때 전역으로 모든 영역에 특정 기능을 추가하고 싶을때 사용한다.
Vue.use(Vuex);
const storage = {
// 원격 API를 간편하게 호출할수 있도록 브라우저에서 제공하는 함수
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))));
}
}
}
return arr;
},
}
export const store = new Vuex.Store({
state:{
todoItems : storage.fetch()
},
getters,
mutations
});
<getters.js>
export const storedTodoItems = (state) => {
return state.todoItems;
}
<mutations.js>
export { addOneItem, remobvOneItem, toggleOneItem, clearAllItem }
// 객체 안이 아니라 각각의 속성이됐다.
const addOneItem = (state, todoItem) => {
var obj = { completed: false, item: todoItem };
localStorage.setItem(todoItem, JSON.stringify(obj));
state.todoItems.push(obj);
}
const remobvOneItem = (state, payload) => {
localStorage.removeItem(payload.todoItem.item);
state.todoItems.splice(payload.index, 1); //idx 데이터 하나 삭제
}
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 = [];
}
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
51. CLI 2.x vs CLI 3.x 차이점 (0) | 2022.08.04 |
---|---|
50. <vue-todo> 프로젝트 모듈화 (0) | 2022.08.02 |
48. 프로젝트 구조화와 모듈화 방법 1, 2 (0) | 2022.08.02 |
47. <vue-todo> vuex로 리팩토링 (0) | 2022.08.02 |
46. 헬퍼 함수가 주는 간편함 (0) | 2022.08.02 |