Vue.jsの元に戻すやり直しのような状態に戻る

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

参照：https://vuex.vuejs.org/en/api.html

あなたは、配列内の指定されたStoreからあなたが望むすべての状態を保つ機能を登録するために使用subscribe(handler: Function)をeaselyすることができます。

次に、replaceState(state: Object)の引数として指定して、その配列に保存された状態のいずれかを使用できます。