Vuex - mutations

mutations

- state의 값을 변경할 수 있는 유일한 방법이자 메서드

- 뮤테이션은 commit()으로 동작시킨다.

//store.js
state: {num :10},
mutations: {
	printNumbers(state) {
    	return state.num
    },
	sumNumbers(state, anotherNum) {
    	return state.num + anotherNum;
    }
}

//App.vue
this.$store.commit('printNumbers');
this.$store.commit('sumNumbers', 20);

//store.js
state: { storeNum: 10},
mutations: {
	modifyState(state, payload) {
    	console.log(payload.str);
        return state.storeNum += payload.num;
    }
}

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

객체도 넘기기 가능

 

적용

//store.js
export const store = new Vuex.Store({
    state: {
        todoItems: storage.fetch()
    },
    mutations: {
        addOneItem(state, newTodoItem) {
            const obj = {completed: false, item: newTodoItem};
            localStorage.setItem(newTodoItem,JSON.stringify(obj));
            state.todoItems.push(obj);      
        },
        toggleOneItem(state,payload) {
            //item.completed = !item.completed; //안티패턴
            state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed; //직접 값에 접근한다
            localStorage.removeItem(payload.item.item);
            localStorage.setItem(payload.item.item,JSON.stringify(payload.item));
        },
        removeAll(state) {
            localStorage.clear();
            state.todoItems = [];
        },
        remove(state, payload) {
            localStorage.removeItem(payload.item.item);
            state.todoItems.splice(payload.index,1);
        }
    }
});

mutations는 state를 관리하기 위한 메소드라는 느낌이 강하다. state의 값에 대해 변경을 해야할 때를 위한 메소드라고 할 수 있다.

 

메소드 작성은 함수명(state, payload)

뮤테이션은 mutationsMethods(state, payload)로 작성해야 하며, state에는 state.items로 접근이 가능하다. 
여기에서 this.$store.state.items로 접근도 될거같은데 아직 vuex의 store 객체가 만들어지지 않아서 접근이 안되는 느낌이다

 

payload는 객체인데, 변수를 state와 payload로 두개만 받을 수 있기에 mutation을 부르는 곳에서는 객체로 보내줘야한다.

state는 고정으로 state만 불러온다. payload는 부르는 곳에서 넣어주는 값이다.

 

//todoList.vue

export default {
    methods : {
        remove(item,index) {
            //this.$emit('remove', item, index);
            this.$store.commit('remove',{ item, index })
        },
        toggleComplete(item, index) {
            //this.$emit('toggleOneItem', item, index);
            this.$store.commit('toggleOneItem', {item, index});
        }
    }
}

이렇게 this.$store.commit('mutation함수명', 보낼 객체); 로 보내줄 수 있다.

한개 값도 객체로 보내주는게 깔끔할 것 같긴하다.