상태를 완전히 복제하고 Vuex에서 롤백하려면 어떻게 해야 합니까?
Vuex에서 트리의 개체 속성의 스냅샷/클론을 생성하여 수정한 후 이전 스냅샷으로 롤백할 수 있습니다.
배경:
응용 프로그램에서 사용자는 특정 변경 사항을 적용하기 전에 시도할 수 있습니다.변경 내용을 적용할 때 기본 vuex 트리에 영향을 줍니다.사용자는 "cancel"을 클릭하여 변경을 파기하고 이전 상태로 돌아갈 수도 있습니다.
예제:
state: {
tryout: {},
animals: [
dogs: [
{ breed: 'poodle' },
{ breed: 'dachshund' },
]
]
}
사용자는 "Try out" 모드로 들어가 1종류에서poodle
로.chihuahua
그런 다음 변경 사항을 취소하거나 적용하기로 결정합니다.
state: {
animals: [
dogs: [
{ breed: 'poodle' },
{ breed: 'dachshund' },
]
],
tryout: {
animals: [
dogs: [
{ breed: 'chihuahua' },
{ breed: 'dachshund' },
]
]
}
}
폐기(이전 상태로 롤백):
state: {
animals: [
dogs: [
{ breed: 'poodle' },
{ breed: 'dachshund' },
]
],
tryout: {}
}
적용(기본 vuex 트리에 변경 내용을 저장):
state: {
animals: [
dogs: [
{ breed: 'chihuahua' },
{ breed: 'dachshund' },
]
],
tryout: {}
}
상태를 상세하게 복제하고 클론을 변경한 후 나중에 변경 내용을 폐기하거나 적용하는 데 적합한 솔루션은 무엇입니까?이 예는 매우 기본적인 것입니다.솔루션은 보다 복잡한 오브젝트/트리에 대응해야 합니다.
편집 1:
vuex-undo-redo라는 라이브러리가 있습니다. 기본적으로 돌연변이를 기록하지만 몇 가지 문제가 있습니다.다른 스택 오버플로우 항목 Vue.js vuex에서 실행 취소와 같은 상태로 돌아가기에서는 vuex 함수를 사용하는 것이 좋습니다.replaceState(state)
.
사용할 수 있습니다.JSON.stringify
그리고.JSON.parse
와 함께replaceState
.
vuex의 경우:
const undoStates = [];
// save state
undoStates.push(JSON.stringify(state));
// call state (remove from stack)
if (undoStates.length > 0) {
this.replaceState(JSON.parse(undoStates.pop()));
}
이렇게 하면 전체 상태의 복사본이 생성되지만 저장소의 일부를 사용할 수도 있습니다.
const animalStates = [];
// save state
animalStates.push(JSON.stringify(state.animals));
// call state (remove from stack)
if (animalStates.length > 0) {
let animals = JSON.parse(animalStates.pop());
this.replaceState({...state, animals} );
}
이 경우 현재 상태를 선택한 개체(이 경우 동물 등)와 병합합니다.
언급URL : https://stackoverflow.com/questions/52815876/how-to-deep-clone-the-state-and-roll-back-in-vuex
'programing' 카테고리의 다른 글
POSIX 시스템에서는 argc를 0으로 할 수 있습니까? (0) | 2022.07.17 |
---|---|
vue2 plus vee-validate - ES6 없이 오류 메시지를 커스터마이즈하려면 어떻게 해야 합니까? (0) | 2022.07.10 |
구성 요소 vuej 외부에 있는 저장소에 액세스 (0) | 2022.07.10 |
구조 필드(C)를 할당하면 "error: assignment to expression with array type error"가 나타난다. (0) | 2022.07.10 |
EditText에서 텍스트 끝에 커서를 놓습니다. (0) | 2022.07.10 |