vuex 상태를 서버와 동기화하기 위해 권장되는 전략
이 간단한 경우를 상상해 보세요.사용자가 작업 목록을 생성하고 정렬할 수 있는 Vue JS 애플리케이션이 있습니다.이러한 목록은 서버에 의해 데이터베이스에 저장되어야 합니다. 이렇게 '아까보다'가 .ListComponentUX의
프런트 엔드 및 백 엔드 데이터 동기화를 처리하려면 어떤 패턴을 사용해야 합니까?
A) vuex로 이동: 활성 목록(표시, 편집 또는 생성된 목록)을 vuex에 저장합니다.store . 。ListComponent 바뀌게 .store그러면 목록에 대한 변경 내용이 API를 통해 백엔드로 전송됩니다.
B) 서버로 직접 이동: 에서 직접 읽고 쓰기ListComponent목록을 표시, 편집 또는 작성할 때마다 서버로 전송됩니다.
A를 따를 경우 매장에는 어떤 아키텍처가 있어야 합니까?동기화는 언제 어떻게 차야 합니까?변경된 내용과 변경되지 않은 내용을 추적하려면 어떻게 해야 합니까?
사용 사례에 따라 둘 다 정답일 수 있습니다.제가 현재 만들고 있는 어플리케이션은 둘 다 사용하고 있습니다.
B를 사용하는 경우: 서버로 직접 이동 데이터를 저장하는 것이 매우 중요한 경우 B를 사용합니다.이 경우 서버로 직접 이동하여 응답을 제공하여 DB에 커밋되었는지 확인할 수 있습니다.관리자 유형 변경에는 이 프로세스를 사용합니다.서버 응답 후 Vuex를 업데이트하고 Vuex를 사용하여 데이터를 제공할 수도 있습니다.
A를 사용하는 경우: Vuex를 통해 보다 빠른 익스피리언스가 필요한 경우 서버를 기다릴 필요가 없으므로 A를 사용하십시오.실제로 저장하기 전에 변경 내용을 낙관적으로 표시해도 됩니다.또 다른 이점은 Vuex를 localStorage와 동기화할 수 있다는 것입니다.뷰를 커스터마이즈하기 위해 사용되는 사용자 환경설정에 사용합니다.그것들을 가져올 때까지 기다리기만 하면 페이지 속도가 느려지는 것은 좋지 않은 경험입니다.
A 사용방법: Vuex를 통해 몇 가지 방법을 알아봅니다.다음은 하나의 패턴입니다.
- 컴포넌트에서 Vuex Action 1을 디스패치합니다.
- 상태를 갱신하는 액션에서 Vuex Mutation을 커밋합니다.이것은 낙관적인 갱신입니다.이 업데이트는 진행이 될 것으로 상정하고 있습니다.
- 액션 1에서 다른 Vuex 액션2를 디스패치 - 이 액션을 여러 액션으로 재사용하는 것을 전제로 하고 있습니다.그렇지 않으면 모두 액션1로 이행할 수 있습니다
- 액션 2는 데이터를 서버로 전송합니다.
- 약속 반환 시 액션2는 Vuex 상태를 갱신하기 위해 변환을 커밋합니다.
- 변환은 불일치(또는 오류)를 처리해야 합니다.
Vuex 비용 계산
코멘트를 통해 알 수 있듯이 Vuex를 사용해야 하는 경우 비용을 계산하는 것이 좋습니다. Vuex는 많은 오버헤드와 복잡성을 증가시키기 때문입니다.Vuex를 통해 상태를 공유할 필요가 없도록 하나의 데이터 유형(예: '목록')과의 모든 상호작용을 포함하는 방식으로 컴포넌트를 작성하는 것이 이상적입니다.
언급URL : https://stackoverflow.com/questions/43572532/recommended-strategy-to-sync-vuex-state-with-server
'programing' 카테고리의 다른 글
| Input Stream 복제 방법 (0) | 2022.06.09 |
|---|---|
| Vue에서 계산된 속성을 사용하여 v-bind 이미지 src를 만듭니다.JS (0) | 2022.06.07 |
| 커스텀 Vue 디렉티브 내의 메서드를 호출하지 않고 식을 실행합니다. (0) | 2022.06.07 |
| vue 2에서 라우터를 변경할 때 로딩 스피너를 표시하는 방법 (0) | 2022.06.07 |
| 스트림을 사용하여 객체 목록을 toString 메서드에서 얻은 문자열로 변환 (0) | 2022.06.07 |