使用vuex在对象数组上执行撤消/重做

Posted 2021-04-30

我正在尝试在复杂的应用程序中实现撤消/重做这是我的历史记录数组的外观。

[
{
  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"
  }
}
]

据我了解，撤消重做可用于历史索引，将根据撤消（增量指针），重做（递减指针）概念进行更改。

基于这种方法，我称其为突变

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–-;
}
}

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

答案

[您可能希望将您的应用程序连接到存储先前对象的任何简单数据库，如果它没有后端，请尝试使用firebase，并使vuex仅具有先前的值，而较旧的对象通过vuex中的mutation方法保存到firebase数据库中

另一答案

您应该考虑使用某种数据压缩方式（如git一样），通过这种方式，您可以继续仅使用Vuex。否则，请考虑使用已建议的某些本地数据库； D