VueJS 아키텍처에 관한 고려사항 프로젝트:Vuex 구현

VueJS 아키텍처에 관한 고려사항 프로젝트:Vuex 구현

델의 프런트 엔드 팀은 현재 다음과 같은 기능을 갖춘 보고서 작성 애플리케이션을 개발하고 있습니다.

• 대시보드
• 포트폴리오 분석 도구(그리드 기반 결과를 반환하는 검색 양식)
• 자동 리포트 페이지

Webpack 보일러 플레이트(Vue-Cli 경유)를 탑재한 VueJ를 사용하여 위의 컴포넌트를 설계하기로 결정하고 공통 컴포넌트를 설계하려고 합니다.

• 리포트 컴포넌트
  • 제목, 설명, 유형(그리드, 시각화 등) 및 일부 설정 매개 변수가 있습니다.
• 보고서 목록 구성 요소
  • 속성으로 제목과 보고서 컴포넌트 배열이 있습니다.
• 보고서 목록 구성 요소가 그리드에 배열된 대시보드

몇 가지 요건

대시보드 구성 요소에는 4개 이상의 보고서 목록 구성 요소가 있을 수 있으며, 각 구성 요소에는 보고서 목록 선택 메뉴에서 사용자가 보기 위해 선택할 수 있는 여러 개의 보고서가 있습니다.각 보고서 구성 요소에는 사용자가 조작하고 보고서를 다시 렌더링하기 위해 제출할 수 있는 설정 매개 변수가 하나 이상 있을 수 있습니다.보고서는 그리드(이 경우 ag-grid) 또는 시각화 기반 보고서일 수 있습니다.마지막으로 Auth0을 통한 인증도 있습니다.

문의사항

• Vuex를 사용하여 모든 컴포넌트 및 관련 상호작용의 상태를 관리하는 것이 타당합니까?
• 이 애플리케이션이 Vuex에 적합한 사용 사례인 것 같습니까?
• 그렇다면 왜?내장된 Vue 메커니즘을 통한 컴포넌트 통신에 컴포넌트를 사용하는 것보다 나은가(부모-자녀, 형제자매 컴포넌트의 경우)?

결정을 내리는데 도움을 주셔서 감사합니다.

Vuex는 동일한 상태를 필요로 하는 구성 요소가 여러 개 있는 경우에 유용합니다.이 경우 다양한 장소와 형식으로 보고서를 표시하고 있습니다.이것은 Vuex의 훌륭한 사용 사례라고 생각합니다.

귀사의 팀이 Vue에 대해 잘 알고 있는지 모르겠지만 소품을 통해 데이터를 전달하는 것은 PITA입니다.특히 데이터가 필요한 구성 요소가 구성 요소 계층에서 멀리 퍼져 있고 일반적으로 깊이 중첩되어 있는 경우에는 더욱 그렇습니다.소품 통과와 여러 단계의 이벤트 진행이라는 도전을 겪어본 사람이라면 누구나 알 수 있을 것이다.

Vuex를 사용하면 컴포넌트 계층 내 어디에서나 데이터를 얻을 수 있는 단일 함수 호출이 가능합니다.신선한 공기입니다.

이 질문에 대한 답변이 매우 독단적이기 때문에 저는 이 질문을 끝내기로 투표했습니다.

저는 Vue를 사용하여 여러 프로젝트를 구축했습니다.어떤 프로젝트는 수십 개의 컴포넌트와 수천 줄의 코드가 포함되어 있습니다.지금까지 Vuex가 필요로 하는 수준으로 복잡함을 느낀 적이 없습니다.

6개의 컴포넌트가 있는 어플리케이션을 설명했습니다.

나는 분명히 내 논리를 커스텀 오브젝트로 추상화했지만, 그건 단지 자바스크립트일 뿐이다.

YMMV

언급URL : https://stackoverflow.com/questions/44376461/architetural-considerations-for-vuejs-project-implementing-vuex