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

아로마홈키퍼님의 프로필 이미지

작성한 질문수

Typescript with Vue 실전 프로젝트

Vuex interface를 구현하여 Store 개발하기

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

작성

·

225

1

안녕하세요! 재밌게 잘 듣고 있습니다.

actions의 역할이 state의 변수에 대한 계산을 담당하는 것이라 이해를 하였습니다.

그렇다면 actions에 비즈니스 로직이 담겨지는 것인가요?
예를 들어 input 값을 바탕으로 어떠한 계산을 한다고 할 경우 
이 어떠한 계산을 하는 부분이 컴포넌트의 method에 담겨지는 것인지, 아니면 actions에 담겨지는 것인지 궁금합니다.

만약 actions에 담기지 않고 컴포넌트의 method에 담긴다고 할 경우에는 계산(component,-methods) 후 바로 mutation을 호출 하면 될 것 같거든요. 

답변 2

2

성도희님의 프로필 이미지
성도희
지식공유자

안녕하세요!

말씀해주신대로, action은 비동기 통신이나 비지니스 로직을 담당하도록 권장하고 있습니다.
관리 관점에서 보았을 때, 값을 직접 설정하는 부분(mutation)과
값에 어떠한 계산을 하는 비지니스 로직(action)을 분리해서 데이터의 흐름을 직관적으로 확인 할 수 있습니다.

action은 하나의 함수 안에서 commit을 원하는 만큼 호출 하여 여러 개의 state 컨트롤이 가능하므로
비동기 통신 뿐 아니라 비지니스 로직도 적합하다 할 수 있습니다.
글쓴님께서 말씀하시는 계산도 비지니스 로직에 포함될 수 있겠지요.

다만,  Vuex는 모든 컴포넌트에서 사용하는 것임을 고려하셔야 합니다.  

글쓴님께서 말씀하시는 계산 로직이 모든 컴포넌트에서 해당 state를 사용 할 때 공통적으로 필요한 것이라면
action에 포함하는것이 코드 중복을 방지할 수 있을 것이고, 
그것이 아니라면 마지막에 말씀해 주신대로 컴포넌트 단에서 필요한 로직을 수행 한 후,
결과값을 mutation을 호출해서 state에 적용해 주시면 될 것 같습니다 ^^

0

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