vuex Helper - mapMutations, mapActions 사용법

인프런 - vue.js 캡틴판교 강의

 

인프런 - vue.js 캡틴판교 강의

인프런 - vue.js 캡틴판교 강의

 

 

mapMutations 사용

store.js

export const store = createStore({
    state: {
        todoItems : storage.item()
    },
    getters: {
        storedTodoItems(state){
            return state.todoItems
        }
    },
    mutations : {
        addOneItem(state,todoItem){
            var 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);
        },
        toggelOneItem(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));
        },
        clearTodoItems(state){
            localStorage.clear();
            state.todoItems = [];
        }
    },
    
})

 

list.vue

            <button v-on:click="removeTodo({todoItem, i})" class="removeBtn"> 
            <!--1개의 인자기 때문에 오브젝트로 묶어서 보낸다.-->
            
            ....
            
<script>
import { mapGetters, mapMutations, mapState } from 'vuex'

export default {
    methods : {
        ...mapMutations({
          removeTodo : 'removeOneItem'
        }), //인자를 입력하지 않아도 암묵적으로 보낸다.
        // removeTodo(todoItem,index){
        //   this.$store.commit('removeOneItem',{todoItem, index});
        // },
        toggleClear(todoItem,index){
          this.$store.commit('toggelOneItem', {todoItem, index});
        }
    },

        ...mapMutations({
          removeTodo : 'removeOneItem',
          toggleClear : 'toggelOneItem',
        }),

2개 이상 사용할 때