상태를 완전히 복제하고 Vuex에서 롤백하려면 어떻게 해야 합니까?

상태를 완전히 복제하고 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