Vuex Mutation / Action Naming Convention

Vuex에서 코드를 짜다보니 Vuex의 Muation과 Action의 함수명이 중복 되면서 Vue Component에서 사용할 때 마지막에 매핑해준 method가 호출되는 것을 확인했다. 그래서 비슷한 행위를 하는 3가지 계층이 있다고 판단되어 다음과 같은 를 만들어서 지키기로 했다.

읽기 생성 수정 삭제
Service get post put delete
Action get post put delete
Mutation read create update remove

Service는 back-end에 Http 요청을 보내는 계층이다. 이 서비스를 사용해서 Vuex의 Action에서 비동기적인 로직을 작성하고 그 결과를 Mutation로 commit하여 state에 커밋하는 구조. Service는 최대한 Http req method와 Url을 따라가는 방식으로 네이밍을 했고, 그것을 사용하는 Action에도 비슷한 컨벤션을 적용했다.

Action과 Mutation의 함수명만 다르면 되니, Mutation에서는 CRUD의 앞글자를 따와 적용하려 했지만 안타깝게도 delete가 중복이었다. 결국 적당한 대체제인 remove를 mutation의 삭제 함수에 사용하기로 결정했다.

Leave a Reply