인프런 커뮤니티 질문&답변
작성한 질문수
watch를 사용하여 store 값 변경 질문입니다.
작성
·
480
1
안녕하세요!
강의 들으면서 개인적으로 프로젝트를 만들어보고 있습니다.
어떻게 컴포넌트를 쪼개야 효율적일까 많은 고민을 해보고 있습니다.
현재 만들어볼려고 하는 프로젝트에는 다음과 같은 wizard 형식의 폼이 있습니다.
다음과 같은 wizard 형식의 폼이 있습니다.
Step1 > Step2 > Step3 순서로 총 3페이지에서 폼 데이터를 입력받습니다.
Step1 페이지는 2개의 자식 컴포넌트를 가지고 있고 각각의 컴포넌트에는 <input type=“text”> 와 같은 텍스트 박스가 여러개 존재합니다.
Step2, Step3 페이지도 Step1 페이지와 같이 자식 컴포넌트를 가지고 있으며 텍스트 박스를 여러개 가지고 있는 구조입니다.
이때 각 페이지는 단순히 자식 컴포넌트를 호출만 해주고 자식 컴포넌트에서 store 호출 및 데이터 저장을 하고 있습니다.
자식 컴포넌트의 텍스트 박스의 경우 v-model로 데이터를 맵핑하고 watch를 이용해서 실시간으로 store에 값을 직접 변경하고 있습니다.
이런식으로 자식 컴포넌트에서 watch를 이용해서 직접 store의 값을 변경하는게 좋은 방법일까요..?
너무 watch를 남발하고 있는것두 같고..
부모 페이지에서 자식 컴포넌트로 props로 데이터를 내려주고 자식 컴포넌트에서 다시 부모에게로 이벤트를 발생시켜서 store의 값을 변경하는게 좋을까요?
wizard 형식의 폼에서 store에 데이터를 저장하는 좋은 방법을 알고 싶습니다.
감사합니다!
답변 3
1
저도 아직 vue 초보라 정확히는 잘 모르겠지만 스텝에서 스텝으로 넘어갈 때 vuex store 의 commit 메소드로 데이터 값을 셋팅해주면 되지 않을까요? 물론 commit 메소드 호출 시 인자는 하나만 넘겨줄 수 있으니 data 값은 객체 리터럴 값으로 넘겨줘서 store 에서는 구조분해해서 값을 mutations 로 state 에 셋팅해놔야되구요
0
안녕하세요 markinfo님, 좋은 질문이고 좋은 고민이네요. 답변자를 생각해서 상세하게 상황을 적어주셔서 감사합니다. 다만, 제가 프로젝트 구조를 정확히 모르는 상태에서 단언을 하기가 조금 어려울 것 같아요 :)
그래도 일단 watch 관련해서 질문 주셨으니 아래에 답변드립니다.
일단 watch는 가급적 지양하시는 게 좋습니다. watch로 제어하는 데이터 속성이 많을수록 나중에 의존 관계가 형성되면 데이터를 효율적으로 제어하기가 어렵습니다. watch로 스토어를 제어하는 부분은 필요에 따라서 그렇게 구현할 수 있을 것 같습니다. 다만, 저는 명시적으로 스토어의 뮤테이션이나 액션을 호출해서 state의 값을 변경한 다음 컴포넌트 단에 표시하는 걸 선호합니다.
질문에 대한 답이 되었는지 모르겠네요. 그럼 남은 강의도 재밌게 들으세요 :)
0
다음 step으로 넘어갈때 store에 commit으로 값을 셋팅할려면 일단 step 페이지(부모) 에서 자식 컴포넌트로 값을 내려주고 자식 컴포넌트에서 이벤트로 변경된 값을 부모에게 적용시켜주고 마지막으로 부모 페이지에서 다음 step으로 넘어가면서 store에 값을 반영해야 되지 않나요? 자식 컴포넌트가 1,2개면 상관없을 수 있겠지만 많다고하면 결국 반복되는 props와 emit의 향연일거 같아서요