Implementing undo/redo in fabricjs with multiple canvases

问题

I am a newbie in vue and fabricjs and currently working on a complex application which deals with large amount of data. I have multiple canvases with different objects, which may change based on user interaction. All the changes/objects are being stored in the array of objects

Demo: https://prkos.csb.app/

I am trying to implement undo/redo in my application. I have a hard time understanding the fabricjs undo/redo approach in the below answer (link)

Undo-Redo feature in Fabric.js

What I think from the above answer (link) is that it deals with single canvas at a time with multiple objects inside it, but in my case, my canvas objects are stored inside an array of objects and which will be modified accordingly based on users interaction like adding colour, adding text, adding rect which will be performed on all the canvases at a time and undo should be reflected on all the canvases. In short, I have multiple canvases with the same objects inside it).

I have tried the below non-fabric approach, where 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. Any suggestions would be really helpful.

Code:(Multiple Canvases) https://codesandbox.io/s/test-project-prkos?file=/src/components/App.vue

Edited: I have updated the example with undo/redo functionality, used fabric-history library, still trying to find a better approach.

来源：https://stackoverflow.com/questions/61438316/implementing-undo-redo-in-fabricjs-with-multiple-canvases