Vuex를 사용하여 상태 트리에서 시간 이동(롤백)을 수행하는 방법

Vuex를 사용하여 상태 트리에서 시간 이동(롤백)을 수행하는 방법

Vuex를 사용하여 시간 여행 기능을 구현하려면 어떻게 해야 합니까? 이전 상태로 돌아가서 작업을 원래대로 되돌리고 싶습니다.

개봉 후 바로 가능합니까?

그걸 어떻게 달성할지 생각나는 거 없어?

그런 걸 바라고 있었어요store.rollback(1)

최상의 방법은 상태 스냅샷의 기록을 유지하는 것이 아니라 커밋된 돌연변이의 기록을 유지하는 것입니다.

한 단계를 취소하려면:

• 상태를 초기 설정으로 리셋하다
• 마지막을 제외한 모든 돌연변이를 재적용하다

이 접근방식은 메모리에 대해 더 쉽고(대규모 스토어를 가지고 있는 경우 특히), 스토어의 취급방법에 더 부합합니다.

여기에서는, 매우 좋은 내역이 있습니다.

https://vuejsdevelopers.com/2017/11/13/vue-js-vuex-undo-redo/

유효한 솔루션은 다음과 같습니다.

https://github.com/anthonygore/vuex-undo-redo

직접 구현하고 prevState를 저장소에 추가하면 실행 취소할 수 있는 부품만 선택할 수 있습니다.

다음으로 1개의 이력 레코드만 지원하는 가장 간단한 예를 나타냅니다.

가게

const state = {
  count: 0,
  prevCount: null
}

돌연변이:

const INCREMENT = state => {
  state.prevCount = state.count
  state.count += 1
}

const UNDO = state => {
  if (state.prevCount !== null) {
    state.count = state.prevCount
    state.prevCount = null
  }
}

더 많은 이력을 필요로 하는 경우 어레이에 배치하기만 하면 됩니다.

const state = {
  count: 0,
  countHistory: []
}

그리고 나서state.countHistory.pop()그리고.state.countHistory.push(xx)기록을 취소하다/저장하다

다른 솔루션은 모든 이력을 자동으로 저장하는 경우 플러그인(미들웨어)입니다.

언급URL : https://stackoverflow.com/questions/41350488/how-to-time-travelrollback-in-a-state-tree-using-vuex