Vue.js에서 실행 취소 다시 실행과 같은 상태로 돌아 가기 vuex

Question

Vuex를 사용하여 실행 취소/다시 실행을 어떻게 만들 수 있습니까? 나는 꽤 복잡한 응용 프로그램을 개발 중이며 Vue 개발자 도구 덕분에 상태간에 전환하는 데 많은 도움이되었으므로 응용 프로그램에서이 기능을 원합니다. 이것을 어떻게 할 수 있습니까?

Answer 1

나는 다음과 같이 실행 취소가 - 다시 구현했습니다 :

1) vuex

const undoRedoPlugin = (store) => { 
    // initialize and save the starting stage 
    undoRedoHistory.init(store); 
    let firstState = cloneDeep(store.state); 
    undoRedoHistory.addState(firstState); 

    store.subscribe((mutation, state) => { 
    // is called AFTER every mutation 
    undoRedoHistory.addState(cloneDeep(state)); 
    }); 
} 

2) 사용하는 플러그인

new Vuex.Store({ 
... 
    plugins: [undoRedoPlugin] 
}); 

3)의 기록을 저장하기위한 플러그인을 만들 undoRedoHistory의 주들

class UndoRedoHistory { 
    store; 
    history = []; 
    currentIndex = -1; 

    init(store) { 
    this.store = store; 
    } 

    addState(state) { 
    // may be we have to remove redo steps 
    if (this.currentIndex + 1 < this.history.length) { 
     this.history.splice(this.currentIndex + 1); 
    } 
    this.history.push(state); 
    this.currentIndex++; 
    } 

    undo() { 
    const prevState = this.history[this.currentIndex - 1]; 
    // take a copy of the history state 
    // because it would be changed during store mutations 
    // what would corrupt the undo-redo-history 
    // (same on redo) 
    this.store.replaceState(cloneDeep(prevState)); 
    this.currentIndex--; 
    } 

    redo() { 
    const nextState = this.history[this.currentIndex + 1]; 
    this.store.replaceState(cloneDeep(nextState)); 
    this.currentIndex++; 
    } 
} 

const undoRedoHistory = new UndoRedoHistory(); 

4)는

undoRedoHistory.undo(); 
... 
undoRedoHistory.redo(); 

당신의 상태가 좋은 방법입니다 상태 복제보다 크기가 큰이 아닌 경우 사용합니다.

Answer 2

참조 : 당신은 당신이 배열에서 주어진 스토어에서 원하는 모든 상태를 유지하는 함수를 등록하는 데 사용 subscribe(handler: Function)을 easely 수 https://vuex.vuejs.org/en/api.html

.

그런 다음 배열에 저장된 상태 중 하나를 replaceState(state: Object)의 인수로 사용하여 사용할 수 있습니다.