使用 vuex 在对象数组上实现撤消/重做答案

【问题标题】：Implementing undo/redo on array of objects using vuex使用 vuex 在对象数组上实现撤消/重做
【发布时间】：2020-08-08 05:15:11
【问题描述】：

我正在尝试在复杂的应用程序中实现撤消/重做这就是我的历史数组的样子。

[
{
  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（递增指针）、redo（递减指针）的概念来改变。

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

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 中实现撤消/重做的正确方法？任何建议都会有所帮助

【问题讨论】：

标签： arrays vue.js javascript-objects vuex undo-redo

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：