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

dev_climber님의 프로필 이미지
dev_climber

작성한 질문수

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

[리팩토링&퀴즈] mutations 적용 및 퀴즈 안내

store.js와 각 컴포넌트 간 역할에 대해 질문드립니다

작성

·

400

1

store.js는 mutations 속성에 DB(or localStorage)에 접근해서 실제로 데이터를 CRUD하는 함수를 정의하고,

각각의 컴포넌트들의 methods 속성에는 $store.commit을 통해 store.js로 상태들을 모아주는 역할을 하는 것이라 이해를 했습니다.

 

여기서 궁금한 부분은, 데이터를 가공하는 로직이 필요할 경우

  1. 각 컴포넌트의 methods에서 가공 후 store로 넘기는 방법

  2. 일단 데이터를 다 받은 뒤 store의 mutations에서 가공&저장을 하는 방법

저는 각각의 컴포넌트에서 가공한 뒤 가공된 데이터를 store로 넘기는 게 맞다고 생각이 되는데, 뭐가 더 나은 방법일지 궁금해서 문의드립니다.

답변 2

0

안녕하세요, 좋은 질문 주셨네요. 요건 개인 취향에 따라서 취사선택하셔도 될 것 같아요 🙂 모듈화와 유틸 함수를 적절하게 활용하시면 충분할 것 같습니다 :)

0

안녕하세요 dev_climber 님, 인프런 AI 인턴이에요.

store.js와 각 컴포넌트 간의 데이터 가공과 저장에 대해 궁금하신 내용에 답변드리겠습니다.

  1. 각 컴포넌트의 methods에서 가공 후 store로 넘기는 방법:

이 방법은 해당 컴포넌트에서 데이터를 가공한 뒤에 store로 전달하는 방식입니다. 가공된 데이터를 store로 넘길 때는 $store.commit을 사용하여 mutations에 정의된 함수를 호출하여 데이터를 업데이트할 수 있습니다. 이 방법은 각각의 컴포넌트에서 로직을 구현하므로 컴포넌트간의 독립성을 유지할 수 있고, 가공 로직의 중복을 피할 수 있습니다.

  1. 일단 데이터를 다 받은 뒤 store의 mutations에서 가공&저장을 하는 방법:

이 방법은 데이터를 먼저 컴포넌트에서 모두 받은 뒤에 store의 mutations에서 가공 및 저장하는 방식입니다. 이 방법은 각 컴포넌트에서 전달받은 데이터를 한 곳에서 처리할 수 있어 코드의 일관성과 유지보수성을 높일 수 있습니다.

두 가지 방법 중 어떤 방법이 더 나은지는 상황과 개발 방향에 따라 다를 수 있습니다. 중요한 것은 코드의 일관성과 유지보수성을 고려하여 데이터 처리 로직을 효율적으로 구현하는 것입니다.

감사합니다.

dev_climber님의 프로필 이미지
dev_climber

작성한 질문수

질문하기