Vuex 5.Mutations

Mutations

• Mutations 는 state 값을 변경시키는 유일한 방법이다.
• 메서드 형식으로 작성하며 commit( name, args ) 으로 접근하게 된다.
• getter() 는 제공방식이며 mutations 는 값을 변경시키는 방식이다.
• commit() 의 arg 속성은 object 로 주어 다양한 인자를 한번에 줄 수 있다.

//store.js

new Vuex.Store({
	state : {
    	num : 10
    },
    getters: {
    	getNum(state) {
         return state.num;
        }
    },
    
    mutations: {
    	printNumbers(state) {
        	return state.num
        },
        sumNumbers(state, anotherNum) {
        	return state.num + anotherNum;
        }
        modifyState(state, payload) {
        	console.log(payload.str);
            return state.num + payload.num;
        }
    }
});


//접근
this.$store.commit('printNumbers');
this.$store.commit('sumNumbers', 20);

//
this.$store.commit('modifyState',{
	str: 'passed from payload',
    num: 20
})'

---

TodoApp 에 수정

• 반드시 state 를 인자로 주어 중앙 데이터에 접근한다.
• App.vue 에서 관리하던 데이터 메서드들이 mutations 에 기술 됨

///store.js

import Vue from 'vue'
import Vuex from 'vuex'

//use() 는 전역적으로 기능을 추가할 때 사용한다. &store 로 접근 가능하다.
Vue.use(Vuex);

// Function 으로 따로 뺌
const storage = {
  fetch() {
    const arr = [];
    //ES6
    const map = Object.entries(localStorage);
    map.forEach((entry,index) => {
      if(entry[0] !== 'loglevel:webpack-dev-server'){
        const item = JSON.parse(entry[1]);
        arr.push(item)
      }
      console.log(arr)
      });
    return arr;
  }
};

export const store = new Vuex.Store({
  state: {
    // 전역적으로 사용되는 데이터
    todoItems: storage.fetch()
  },
  mutations: {
    addOneItem(state, TodoItem) {
      const obj = {completed: false, item: TodoItem};
      //Object를 저장하기위해 stringify를 사용하는 것도 좋다.
      localStorage.setItem(TodoItem,JSON.stringify(obj));
      // mutations 는 반드시 state 인자로만 접근하다.
      state.todoItems.push(obj);
    },
    removeOneItem(state,itemInfo){

      localStorage.removeItem(itemInfo.todoItem.item);
      //배열요소 빼기 : (배열을 직접적으로 건드림) , slice(새로운 배열을 리턴 함)
      state.todoItems.splice(itemInfo.index, 1);
    },
    toggleOneItem(state,itemInfo) {
      // 중앙 컴포넌트에서 관리되야한다.
      state.todoItems[itemInfo.index].completed = !state.todoItems[itemInfo.index].completed

      const item = itemInfo.todoItem.item;

      localStorage.removeItem(item);
      localStorage.setItem(item,JSON.stringify(itemInfo.todoItem));
    },
    clearAllItems(state) {
      state.todoItems = [];
      localStorage.clear();
    }
  }

});

 

더 이상 App.vue 에 데이터 관리 코드와 :props, @ 같은 이벤트 수신이 없다.

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

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'

//Vue
export default {
  data() {
    return {
      todoItems : []
    }
  },

  components: {
    //태그명 : 내용 ES6 에서는 값과 내용이 같을시 생략됨
    TodoHeader,
    TodoInput,
    TodoList,
    TodoFooter
  }
}
</script>

 

 

---

 

왜 Mutations 으로 state 에 접근하여 데이터를 변경해야하는가?

• 여러개의 컴포넌트 구조상에서 state 값에 직접 접근하는 경우 어디서 state 를 변경했는지 찾기 어렵다.
• 즉, 해당 컴포넌트 파일을 찾아야만 추적 가능하다.

///component 의 method 속성에서 직접 적으로 state 를 변경시키는 모습

methods : {
	increaseCounter() { this.$store.state.counter++; }
}

 

• 특정한 시점에 어떤 컴포넌트가 state 를 접근해서 변경했는지 확인이 어렵다.
• Vue 개발자 도구에서도 Store 의 Mutations 를 거쳐야 디버깅이 가능하다.
• Vue Reactivity 도 Store 의 Mutations 를 거쳐서 State 를 변경해야 반응성이 주입된다.

반드시 Mutations 을 변경해야 모니터링 되고 반응성이 주입된다.