Implementing undo/redo on array of objects using vuex

Question

I am trying to implement undo/redo in a complex application This is how my history array looks.

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

As far as I understood, the undo, redo works on a history index, which will be changed based on undo (increment pointer) , redo (decrement pointer) concept.

Based on this approach I am calling a mutation where

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

I feel this is not the most efficient way to perform undo/redo operations, as it includes cloning objects and even it has to handle huge sets of data. Which might lead to freezing of the application I am still a newbie in vuejs, please do correct me if I am wrong, is there any more efficient way to perform undo-redo operations ? or the right way to implement undo/redo in vuejs?. Any suggestions would be helpful

Answer 1

You should consider use some kind of data compress (like git does), with this you can continue using only the Vuex. Otherwise, consider use some local database as already recommended ;D