Vuex에서 Store는 각각 특정 역할을 가진 여러 파일로 나뉩니다. 이러한 관심사의 분리는 코드베이스를 보다 관리하기 쉽고 유지 관리하기 쉽고 이해하기 쉽게 만드는 데 도움이 됩니다. 다음은 각 파일의 역할에 대한 간략한 개요입니다.
1.
state.js - 애플리케이션의 데이터를 보유하는 State 객체를 포함합니다. 앱 데이터에 대한 신뢰할 수 있는 단일 소스 역할을 합니다.
2.
mutations.js - State를 직접 수정하는 Mutations 함수를 포함합니다. Mutations은 동기식이며 Vuex Store에서 State를 변경하는 유일한 방법입니다. 단순하고 동기식 상태 업데이트만 처리해야 합니다.
3.
actions.js - 비동기식일 수 있고 여러 변형을 커밋할 수 있는 작업 함수를 포함합니다. 작업은 복잡한 비즈니스 논리를 처리하고, API를 호출하고, 이러한 호출의 결과로 Mutations을 커밋하는 데 유용합니다.
4.
getters.js - Store의 State를 기반으로 파생된 State를 계산하는 데 사용되는 getter 함수를 포함합니다. 게터는 State에 대한 액세스를 중앙 집중화하는 데 도움이 되며 구성 요소의 계산된(computed) 속성에도 사용할 수 있습니다.
5.
mutation-types.js - Mutations 이름을 나타내는 상수를 포함합니다. 이 파일은 선택적 파일이지만 오타를 방지하고 Mutations 이름의 일관성을 촉진하는 데 도움이 되므로 대형 애플리케이션으로 작업할 때 유용합니다.
코드를 다른 파일로 분리할 때의 장점:
•
더 나은 코드 구성 및 관심사 분리로 이해하고 유지하기가 더 쉽습니다.
•
각 파일에는 특정 책임이 있으므로 문제를 찾고 디버그하는 것이 더 간단합니다.
◦
SOLID (객체 지향 설계)
S |
•
코드의 재사용성을 촉진하고 코드 중복을 줄입니다.
•
다른 팀 구성원이 충돌을 일으키지 않고 다른 파일에서 작업할 수 있으므로 협업 및 팀워크가 향상됩니다.
코드를 다른 파일로 분리할 때의 단점:
•
처음에는 구조를 설정하고 다른 파일이 서로 상호 작용하는 방식을 이해하는 데 시간이 더 걸릴 수 있습니다.
•
소규모 애플리케이션의 경우 이 구조가 과도하거나 불필요해 보일 수 있습니다. (저희 상황 같네요)
초기 복잡성에도 불구하고 코드를 다른 파일로 분리하는 것은 일반적으로 더 유지 관리 및 확장 가능한 코드베이스로 이어지기 때문에 좋은 방법으로 간주됩니다.