권장되는 VueJS 애플리케이션 API 및 Vuex 설계 패턴이 있습니까?
저희 팀과 저는 중대형 어플리케이션의 시작에 대해 연구하고 있습니다.asp.net 코어 백엔드를 갖춘 Vue 2 클라이언트 렌더링 애플리케이션입니다.클라이언트는 수만 개의 아이템과 그 상태를 관리하는 데 사용됩니다.애플리케이션은 아직 초기 단계에 있으며, 기존 클라이언트 측 스토어를 재구축할 수 있는 방법을 생각해 왔습니다.
우리는 모두 처음이고 독학으로 배우고 있기 때문에 Vue 애플리케이션에서 데이터 관리에 가장 적합한 패턴이 무엇인지 잘 모르겠습니다.
VueJS 어플리케이션에서 권장되는 데이터 관리 패턴이 있습니까?
현재 패턴은 다음과 같습니다.
| |
| +-----------+ |
| | | | +-----------+ +-----------+ +------------+
| | API |---->| | | | | |
| | | | | Router |---->| Vuex |---->| Views/ |
| +-----------+ | | | | |<----| Components |
| ^ | ^ | | | | | | |
| | | | | +-----------+ +-----------+ +------------+
| | | | |Vue |
| | | | +---------------------------|-------------------------
| | | | |
|Client| -----------------------------------
+----|-|---------------------------------------------
| |
+---------|-|------
|Backend | v
| +----------+
| | |
| DB |
| |
| |
+----------+
우리는 모든 API끝점을 포함하는 API컨트롤러다.모든 API포함하는 API컨트롤러가 있습니다 엔드포인트를.응용 프로그램이, 라우터의 응용 프로그램이 로드되면 라우터의에 로드됩니다.beforeEnter우리는 다음 Vuex 가게에 그 저지른 모든 데이터를 인출 기능.모든 데이터를 가져와 Vuex 스토어에 커밋합니다.그리고 사용자 사용자들은 애플리케이션(adding/deleting/editing)아이템들이 상점은 수정된 다음 Vuex를 호출하는 API제어기와 그 데이터가 보내는 일을 백앤드.그런 다음 사용자가 애플리케이션 항목 추가/삭제(adding/deleting/editing)을 변경하면 Vuex가 API컨트롤러를 호출하고데이터가 백엔드로 전송됩니다.
API를 누가 호출해야 하는지, Vuex가 어떤 데이터를 저장해야 하는지에 대한 의견을 조사한 결과입니다.일부 블로그와 코스에서는 Vuex가 API를 관리하는 방법이라고 하지만, 존경받는 Vue 커뮤니티 멤버 간의 포럼 토론에서는 그렇지 않다고 말합니다.그러나 2018/19년도부터의 Vue의 빠르고 변화무쌍한 환경 기사와 논의는 오늘날의 Vue에는 적용되지 않습니다.
현재의 아이디어는 라우터에서 Vuex로 커밋하는 것이 아니라 라우터에서 뷰로 데이터를 전달하고 뷰를 스토어에 커밋하는 것입니다.뷰/컴포넌트도 Vuex 대신 게시물을 호출합니다.이것은 가게의 책임을 제한할 것이다.
Nuxt.js의 사용 가능성도 검토했습니다만, 그 문서에는 스토어/API 관리에 관한 엄격한 가이던스가 기재되어 있지 않습니다.
TL;DR: 일반적으로 대규모 Vue.js 애플리케이션(또는 SPA 애플리케이션)을 구축할 때는 여러 가지를 혼재시켜야 합니다.
그러기 위한 정해진 권장 패턴은 없습니다.정답은 항상 - 상황에 따라 다릅니다.
다음은 도움이 되는 몇 가지 가이드라인입니다.
층
일반적으로 수평 레이어와 수직 레이어의 두 가지 방법이 있습니다.수평 레이어에서는 시스템은 다음과 같은 레이어로 나뉩니다.
App Level Component
<-- Multiple Views (pages)
<-- Business Logic Components
<-- Re-usable lower order components
and API (Fetch/XHR/Websockets)
일반적으로 Business Logic Components는 API 계층 모듈을 사용하는 첫 번째 단계입니다.이들은 기본적으로 다양한 API 호출을 포함하고 응답을 정규화하는 모듈 집합입니다.
깔끔해 보이지만 컴포넌트가 너무 많으면 모든 컴포넌트가 플랫폴더 안에 있기 때문에 쉽게 조작할 수 없습니다.
API 레이어를 제외하고 일반적으로 다른 레이어는 (비즈니스 동작에 따라) 수직으로 모듈로 분할되며 관련된 모든 컴포넌트와 도우미 코드는 해당 모듈 또는 관련 서브모듈에 저장됩니다.예를 들어 전자상거래 소프트웨어에서 계정, 주문, 결제, 카탈로그 등으로 나뉩니다.
그러나 수직 계층화는 실제로 대규모 애플리케이션을 사용하는 경우에만 도움이 됩니다. 그렇지 않으면 단순한 수평 계층으로도 충분합니다.
응용 프로그램 상태
여기서부터 일이 꼬인다.이는 앱이 진화함에 따라 지속적으로 진행되는 과정입니다.여기서 실천해야 할 것은 글로벌 스테이트와 로컬 스테이트를 만드는 것입니다.읽지 않은 메시지를 표시하는 Bell 아이콘이 있는 응용 프로그램이 있으며, 같은 페이지 하단에 메시지를 읽을 수 있는 방법(Facebook/LinkedIn 등)이 있으며, 상태를 동기화 및 유지해야 한다고 상상해 보십시오.
이는 글로벌 상태의 한 예이며, 따라서 일부 최상위 공통 상위 항목 또는 Redux나 Vuex와 같은 더 나은 외부 데이터스토어에 유지될 수 있습니다.둘 다 똑같아요.일반적으로 이러한 글로벌 및 공유 상태만 명시적인 상태 저장소로 모델링해야 합니다.또 다른 예는 사용할 수 있는 사용자 세부 정보에 로그인되어 있습니다.
특정 상태를 저장소로 나열하는 또 다른 기준은 시간 여행(실행 취소 및 재실행) 기능과 같은 기능이 필요하거나 그리기 앱, 게임 등과 같은 앱의 로컬 지속성을 유지하고 싶은 경우입니다.
라우팅 및 상태 관리
글로벌 스테이트와 함께 라우팅도 어플리케이션의 또 다른 최우선 과제입니다.라우팅 결정(가드, 프리페치 등)에서는 스토어의 글로벌 데이터를 사용할 가능성이 있기 때문에 항상 글로벌스토어가 첫 번째가 됩니다.따라서 항상 먼저 스토어를 초기화한 후 필요에 따라 라우터와 함께 사용합니다.
API 레이어
중복되는 것이 있으면 신속하게 식별할 수 있으므로 모든 API 코드를 함께 보관하십시오.API 레이어는 가능한 한 덤프여야 합니다.대부분은 데이터 정규화, 해석, 디코딩, 낙타/스네이크케이싱 조정 등입니다.API 레이어는 라우터 또는 글로벌스테이트 스토어에서 직접 정보에 액세스 할 수 없습니다.필요한 것이 있는 경우는, 발신자에 의해서 전달됩니다.
그러나 GraphQL과 구독을 함께 사용하는 경우에는 이야기가 달라집니다.이 경우 문맥을 더 잘 인식하게 되므로 그렇게 설계해야 합니다.
컴포넌트 설계
고차 성분과 저차 성분을 명확하게 구분합니다.버튼, 캘린더, DatePicker, 드롭다운 등의 하위 컴포넌트를 재사용할 수 있습니다.애플리케이션과 그 비즈니스 논리에 대한 지식이 없어야 합니다.이는 모든 Vue.js 애플리케이션에서 사용할 수 있는 미니 컴포넌트 라이브러리를 소유하는 것과 같습니다.
고차 컴포넌트는 애플리케이션의 주요 마법이 발생하는 곳입니다.라우터/vuex/api 등 여러 소스에서 데이터를 가져오는 컴포넌트입니다.이들 컴포넌트는 다시 평평하지 않고 일반적으로 자체 레이어로 분할됩니다.
상위 대부분의 컴포넌트만 라우터에 액세스할 수 있도록 허용하고 하위 컴포넌트에 데이터를 사용할 수 있도록 해야 합니다.인증은 컴포넌트 계층에 분산되어 있습니다.
자세한 내용은 링크를 참조하십시오.
대규모 웹 애플리케이션을 위한 Vue-Router의 베스트 프랙티스는 무엇입니까?
vuex 웹사이트의 이 이미지는 vuex의 모든 요소에 대한 우려를 잘 설명해 준다고 생각합니다.액션은 API를 호출한 후 애플리케이션 상태를 업데이트하기 위해 받은 응답을 커밋하기 위한 변환입니다.Vue 구성 요소는 getter를 통해 상태를 읽습니다.작업이 상태에서 업데이트를 커밋하면 getters는 해당 값을 업데이트하고 구성 요소는 업데이트된 데이터를 렌더링합니다.렌더링을 위해 API에서 일부 데이터가 필요한 vue 컴포넌트가 있는 경우 다음과 같이 네비게이션가드에서1개 이상의 액션을 디스패치할 수 있습니다.beforeEnter또는beforeRouteEnter또는 업데이트, 등이 응용 프로그램 상태 적재.
언급URL : https://stackoverflow.com/questions/66963930/is-there-a-recommened-vuejs-application-api-and-vuex-design-pattern
'sourcecode' 카테고리의 다른 글
| Java에서 Array List를 초기화하려면 어떻게 해야 하나요? (0) | 2022.07.28 |
|---|---|
| JVM과 HotSpot의 차이점 (0) | 2022.07.28 |
| C++ 프로그램에 대한 C 라이브러리 사용 (0) | 2022.07.27 |
| 값별 트리 맵 정렬 (0) | 2022.07.27 |
| 항아리 유물의 메이븐 최종 이름 제어 (0) | 2022.07.27 |