vuex mutations 질문입니다.

안녕하세요.

강의 수강 후 직접 프로젝트를 만들어보고 있습니다.

vuex의 mutations와 관련된 질문입니다.

vuex의 state는 반드시 mutations를 이용해서 값을 변경해줘야 한다고 알고 있습니다.

근데 아래와 같이 배열이 중첩된 구조일때

const itemArr = [
    {
        id: 1,
        name: '상품A'
        options: ['옵션A', '옵션B']
    },
    {
        id: 2,
        name: '상품B',
        options: ['옵션C', '옵션D']
    }
]

상품B의 옵션 중 하나를 삭제해야 되는 경우는 어떻게 해야 될까요?

기존에는 아래와 같이 컴포넌트단에서 commit을 할 때 상품B의 id값을 인자로 전달을 하고 store의 mutations에서는

state에서 itemArr을 꺼내와 전달받은 id값과 비교해 상품B를 찾고 다시 options 배열을 꺼내서 삭제할 요소를 찾은 후 삭제를 하였습니다.

코드는 아래처럼..

// 컴포넌트
...
methods: {
    delItem(itemId, optionName) {
        this.$store.commit('order/DELETE_ITEM_OPTION', { itemId, optionName });
    }
}

// store
...
export const mutations = {
    DELETE_ITEM_OPTIONS(state, { itemId, optionName }) {
        const item = state.itemArr.find(item => item.id === itemId);
        const delIdx = item.options.findIndex(op => op === optionName);
        item.options.splice(delIdx, 1);
    }
}

근데 컴포넌트단에서는 itemArr을 화면에 그리면서 for문을 돌면서 delItem 메서드를 호출하게 될 텐데 이미 삭제 대상이되는 item 객체(itemArr의 요소)를 알고 있는 상황인데요

위처럼 itemId를 넘기면 mutations에서 다시한번 state에서 itemArr 배열을 꺼내와서 item의 id를 비교해야 될텐데 같은 작업을 store에서 다시 반복해야 되더라구요

그래서 아래와 같이 itemId를 넘기는게 아닌 삭제 대상이 되는 item 객체(itemArr 요소)를 바로 인자로 넘겨버려도 될까요?

// 컴포넌트
...
methods: {
    delItem(item, optionName) {
        this.$store.commit(‘order/DELETE_ITEM_OPTION’, { item, optionName });
    }
}

// store
…
export const mutations = {
    DELETE_ITEM_OPTIONS(_state, { item, optionName }) {   // state는 안쓰임
        const delIdx = item.options.findIndex(op => op === optionName);
        Item.options.splice(delIdx, 1);
    }
}

지금까지는 mutations에서는 반드시 state에서 값을 꺼내와서 값을 변경해줬는데 위처럼 state에서 꺼내지 않고 item 객체를 전달받아서 변경을해도 상관이 없을까요?

권장되지 않는 방식인지 궁금합니다.

감사합니다.

인프런 커뮤니티 질문&답변