vuex의 mutations에서 state를 사용하지 않고 변경해도 될까요?

Question

안녕하세요.

vuex에서 mutation 사용 시 궁금증이 있어서 글 남깁니다.

보통 store를 사용 시 state의 값은 반드시 mutation을 이용해서 값을 변경해야 됩니다.

근데 state에 itemArr이라는 배열이 존재하고 itemArr은 아래와 같습니다.

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

itemArr 배열의 상품B의 옵션 중 옵션D를 삭제해야 되는 경우입니다.

지금까진 mutation의 첫번째 인자인 state에서 itemArr을 가져와서 상품을 찾고 다시 옵션을 찾은 후 삭제를 했습니다.

DELETE_ITEM(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); }

근데 mutation의 state에서 itemArr을 꺼내지 않고 바로 mutation에서 삭제대상이 되는 item 객체를 받아서 옵션을 삭제를 해도 되는지 궁금합니다.

DELETE_ITEM(_state, { item, optionName }) { // state는 안쓰임 delIdx = item.options.findIndex(op => op === optionName); item.options.splice(delIdx, 1); }

vue의 컴포넌트의 메서드에서 commit할때 이미 대상이 되는 item 객체를 알고 있는데 mutation에서 다시 한번 state에서 itemArr을 꺼내서 item 객체를 찾는게 비효율적인거 같아서요

답변 부탁드립니다.

Answer 1

안녕하세요.

아래에 작성해 주신 것 처럼 commit때의 parameter로 바로 item을 넘기셔도 상관이 없습니다.

말씀주신 것 처럼

const item = state.itemArr.find(item => item.id === itemId);

는 생략을 하시고 바로 item을 받아서 사용하시면 됩니다.

Answer 2

질문자님처럼 state를 인자로 받아서 변이를 일으키는 방법과 컴포넌트에서 직접 v-model에 state를 받아서 직접 변경하는 방법 모두 사용 할 수는 있지만 vue 개발팀에서 추구하는 방식은 아닙니다.

vuex와 같은 중앙집중식 상태 관리 패턴에서는 한 곳에서 모든 상태에 대해서 관리하고 유지하며 저장 및 변경 내용을 추적할 수 있는 매커니즘입니다.

v-model에 직접 state를 바인딩하여 변경하거나 state를 mutation의 인자로 전달하여 직접 인자값을 바꾸는 것은 가능하나 이러한 행동들이 많아지면 많아 질 수록 변이에 대해 추적이 어렵고 관리가 어려워집니다. 이런 문제로 추후 사이드 이펙트가 발생될 확률이 증가하며 이외의 문제를 야기할 수 있기 때문에 vue 팀에서 가이드하는 적합한 방법으로 사용하는 것을 추천드립니다.

vuex의 store는 컴포넌트 간의 데이터 모델을 공유하기도 쉽고 사용하기도 쉽지만 한 곳에서 관리가 되고 컴포넌트 간 제약성이 적기 때문에 사용에 있어서 엄격한 제약이 필요합니다. 결과는 같더라도 관리 포인트 측면과 이 후 유지보수의 어려움을 따진다면 좋은 방법은 아니라 생각됩니다.