[Vue.js] Vuex 언제 action을 사용해서 Store를 변경하는걸까?

배경 Vuex를 사용하여 쇼핑몰 애플리케이션에서 장바구니를 구현하고 있었다. 장바구니 페이지는 사용자가 장바구니에 담아놓은 상품들이 있고, 각 상품에는 해당 상품을 장바구니에서 지울 수 있는 삭제 버튼이 존재한다. 컴포넌트는 [부모 컴포넌트]장바구니(CartPage) -> [자식 컴포넌트]상품(CartItem) 방식으로 설계를 해두었고, 상품(CartItem) 내부에 구현된 삭제 버튼을 클릭할 때, Store에서 해당 상품을 제거하는 이벤트가 발생하게 된다. 기존에는 삭제 버튼을 클릭하는 경우, 부모 컴포넌트로 이벤트를 emit하여 부모 컴포넌트에서 Store 업데이트 작업을 처리하도록 구현했었다. 그러나, 코드 리뷰를 통해서 해당 기능은 Vuex를 사용하고 있으므로 부모 컴포넌트로 event를 전달하기..

→2022.02.22