使用 vuex 在对象数组上实现 undo/redo

Question

我正在尝试在复杂的应用程序中实施 undo/redo 这就是我的历史数组的样子。

[
{
  action:“added”,
  payload:{ 
    id:"32132132",
    data: "JSON.Stringify(JSON.parse(data))) initial data getting from initial app setup"
  }
},
{
  action:“updated”,
  payload:{ 
    id:"32132132",
    data: "getting the diff"
  }
},
{
  action:“deleted”,
  payload:{
    id:"32132132",
    data: "data"
  }
}
]

据我了解，撤消、重做对历史索引起作用，这将根据 undo (increment pointer) , redo (decrement pointer) 概念进行更改。

基于这种方法，我调用了一个突变，其中

apply(state,actiontype){
if(actiontype==undo){
           remove the respective objects
           pop(data) //pops the data out of other places in the application not the history
           historyindex++;
}else if(actiontype==redo){
           get the data from history
           unshift(data);
           historyindex–-;
}
}

我觉得这不是执行 undo/redo 操作的最有效方式，因为它包括克隆对象，甚至它必须处理大量数据。这可能会导致应用程序冻结我还是vuejs的新手，如果我错了请纠正我，有没有更有效的方法来执行撤销-重做操作？或者在 vuejs 中实现 undo/redo 的正确方法？任何建议都会有所帮助

Answer 1

你可能想将你的应用程序连接到任何存储你以前的对象的简单数据库，如果它没有后端，请尝试使用 firebase，并使 vuex 只具有以前的值，但旧的通过 vuex 中的变异方法保存到 firebase 数据库

Answer 2

你应该考虑使用某种数据压缩（就像 git 那样），这样你就可以继续只使用 Vuex。否则，考虑使用已经推荐的一些本地数据库；D

使用 vuex 在对象数组上实现 undo/redo

Implementing undo/redo on array of objects using vuex

arrays

undo-redo

javascript-objects

vue.js

vuex