안녕하세요! Vuex, actions 질문이 있습니다.

Question

안녕하세요! 재밌게 잘 듣고 있습니다. actions의 역할이 state의 변수에 대한 계산을 담당하는 것이라 이해를 하였습니다. 그렇다면 actions에 비즈니스 로직이 담겨지는 것인가요? 예를 들어 input 값을 바탕으로 어떠한 계산을 한다고 할 경우  이 어떠한 계산을 하는 부분이 컴포넌트의 method에 담겨지는 것인지, 아니면 actions에 담겨지는 것인지 궁금합니다. 만약 actions에 담기지 않고 컴포넌트의 method에 담긴다고 할 경우에는 계산(component,-methods) 후 바로 mutation을 호출 하면 될 것 같거든요.

성도희 · Answer

안녕하세요! 말씀해주신대로, action 은 비동기 통신이나 비지니스 로직을 담당하도록 권장하고 있습니다. 관리 관점에서 보았을 때, 값을 직접 설정하는 부분(mutation)과 값에 어떠한 계산을 하는 비지니스 로직(action)을 분리해서 데이터의 흐름을 직관적으로 확인 할 수 있습니다. action은 하나의 함수 안에서 commit을 원하는 만큼 호출 하여 여러 개의 state 컨트롤이 가능하므로 비동기 통신 뿐 아니라 비지니스 로직도 적합하다 할 수 있습니다. 글쓴님께서 말씀하시는 계산도 비지니스 로직에 포함될 수 있겠지요. 다만,  Vuex는 모든 컴포넌트에서 사용하는 것임을 고려하셔야 합니다.   글쓴님께서 말씀하시는 계산 로직이 모든 컴포넌트에서 해당 state를 사용 할 때 공통적으로 필요한 것이라면 action에 포함하는것이 코드 중복을 방지할 수 있을 것이고,  그것이 아니라면 마지막에 말씀해 주신대로 컴포넌트 단에서 필요한 로직을 수행 한 후, 결과값을 mutation을 호출해서 state에 적용해 주시면 될 것 같습니다 ^^

아로마홈키퍼 · Answer

너무나도 상세한 답변 감사합니다!