如何使用Vuex在州树中进行时间旅行(回滚)？

Question

如何使用Vuex实现时间旅行功能？我想回到以前的状态,撤消一些事情.

开箱即可吗？

有关如何实现这一点的任何想法？

希望有类似的东西 store.rollback(1)

Answer 1

最好的方法不是保留状态快照的记录，而是保留已提交突变的记录。

要撤消一步：

• 将状态重置为初始状态
• 重新应用所有突变但最后

这种方法在内存上更容易（尤其是如果你有一个大型商店），并且更符合应该如何对待商店。

这里有一个很好的细分：

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

一个有效的解决方案：

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

Answer 2

只需自己实现,将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)撤消/保存记录

另一种解决方案是插件(中间件),以防您想要自动保存所有历史记录.