回到像 Undo Redo 这样的状态 在 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(在撤消重做历史记录中保存状态的历史记录

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

您可以轻松地使用 subscribe(handler: Function) 注册一个函数，该函数将给定存储中所需的所有状态保存在数组中。

然后，您可以通过将它们作为参数提供给replaceState(state: Object)来使用该数组中的任何保存状态。