Vuex로 todolist를 mutation과 action으로 리팩토링하기!

으악, 한번 포스팅을 날려버렸다. 하필이면 제일 길게 쓴 포스팅을...T.T

하지만 기본 골자는, 복잡하고 각 파일에 흝어져있는 메소드와, data props와 v-bind: 형식을

깔끔하게 store.js에 넣고, 출력할 페이지에서 간편하게 this.$store. ~ 으로 꺼내 쓸수 있다는점!

 

 

---

Vuex로 todolist를 mutation과 action으로 리팩토링하기!

2022/09/12

 

 

1.Vuex로 mutation사용하기,
=>state값을 변경할 수 있는 방법! (꼭 mutation으로 변경해야함!)

=>첫번쨰 인자로 state를 가져오기 떄문!

=>commit() 으로 사용!

=>왜 사용해야하냐면, js코드들을 store.js에서 한눈에 모아볼 수 있고! 각각의 파일들이 깔끔하게 리팩토링

===store.js 파일에서 ===

state: { num:100 },
mutations: {
	returnNumbers(state){
    	return state.num
    },
    
    multipleNumbers(state, anotherNum){
    	return state.num + anotherNum;
    }
}

=>num은 100이라 선언하고, mutations에서 각각의 함수 2개,
두번째 함수에서는 기존의 sate랑 다른 숫자 기입 가능하도록 선언

===App.vue파일에서 ===
this.$store.commit('returnNumbers');
this.$store.commit('mutipleNumbers',30);

=>commit();형식으로 ()안에 ''함수와 값을 넣어주기
multipleNumber은 state랑, 숫자를 넣어주기로 store.js에서 선언해서 값 2개 넣기

 

mutation은 객체화시켜서 인자(payload)를 전달 가능

===특히, App.vue에서 여러 키밸류들을 주고 싶다면, {키값명1:키값1, 키값명2:키값..} 이런식으로 넘겨 줄 수 있음!

===store.js에서===
state: { newNum: 100},
mutations:{
	changeState(state, playload){
    console.log(payload.str);
    retrun state.newNum += payload.num;
    }
}

===App.vue에서===]
this.$state.commit)('changeState',{
	str:'passed form payload',
	num:20
});

 

2.todolist 파일에서 mutation사용하기

App.vue에 있는 메소드들을 mutation으로 변경 가능함

기본골자는,,

1.데이터를 처음 주는 파일에서 메소드를 store.js로 옮김

2.store.js에서 mutation을선언, state로 인자를 사용하고, payload로 사용

(this. > state.으로 변경)

3.데이터를 받는 파일에서 this.$store.commit();형태로!

 

2-1.메소드를 store.js로 옮기고 인자 변경해주기

 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 = [];

            }

 

3. App.vue에서 메소드를 this.$store.commit();으로 변경

{}로 인자 여러개일떄 넣어줄 수 있음!

(*//가 앞에 있 는 라인은 리팩토링 이전의 코디임!)

export default {
  methods : {
    removeTodo(todoItem, index){
      //this.$emit('removeItem',todoItem, index);
      this.$store.commit('removeOneItem',{todoItem, index});
          },
    toggleComplete(todoItem, ){
      //this.$emit('toggleItem',todoItem,index);
      this.$store.commit(toggleOneItem),{tosoItem, index};
    }
  }
}

 

4.App.vue의 태그들은 깔끔해 졌다!

    <div id="app">
      <TodoHeader></TodoHeader>
      <TodoInput></TodoInput>
      <TodoList></TodoList>
      <TodoFooter ></TodoFooter> 
    </div>

 

 

5.action은 dispatch로 호출함!

=>ES6 Pomise와 async의 비동기화를 action으로 처리함!

(*비동기화란, 하나의 연산이 다 실행되기전에 할수 있는 다른 연산을 실행하는것)

1.state를 어떤 콤포넌트에서, 호출 시점을 확인하기 위해서
2.mutation으로 동기적인 요소 처리
3.action으로 비동기로 처리!
***만약 store.js의 state를 접근하는데, 여러 콤포넌트파일에서 시간차로 접근한다면 어려움,
그래서 actions로 비동기 로직 처리

 

=>store.js에 있는 action을 호출시키기 위해선 예) this.$store.dispatch(''); 로 사용

 

===store.js파일에서 mutaions과 action을 정의===

mutations:{
	addTime(state){
    	state.time++
    },}
    
=>state인자를 addTime이라는 메소드로 정의, 위의 time이라는 state가 생략되어있지만 위에 있음!


===action으로 mutations을 정의===
actions:{
	DelayAddTime(context){
    	setTimeout(() => context.commit('addTime'),3000);
    }

}
=> 삼초마다 tim

=== App.vue파일에선===
methods:{
	increaseTime(){
    	this.$store.dispatch('delayAddTime');
    }
}

=>메소드 실행, mutations은 dispatch로!delayAddTimeㅣ를 실행시키면
store.js에서 DelayAddTime을 실행시키고 3초정도 딜래이 되어서 addTime을 실행

 

아무튼 store.js에서 사용되는 state를 추적하기 위해 동기화, 비동기화를

잘 구분해서 써야한다!