vue中实现web交互的重复撤销和恢复功能

Question

问题描述

找到两篇文章，一个用Java，一个用react。但是写在自己的vue项目中不知道要怎么改才对
https://blog.csdn.net/sjepy/a...
https://zhuanlan.zhihu.com/p/...

相关代码

revokeList(){
        //最大撤销次数
        let MAX_HISTORY = 20;
        const record = {
          do: Function,
          inverse: Function,
        };
        let that = this;
        class CommandManager {
          
          execute(record){
            record.do()
            that.revokelist.push(that.functionsList)
            that.reformlist=[]
            while(that.revokelist.length>MAX_HISTORY){
              that.revokelist.shift()
            }
          };
          undo(){
            if(that.revokelist.length===0){
              console.log("nothing undo")
              return false
            }
            var record = that.revokelist.pop()
            record.inverse()
            that.reformlist.push(record)
          };
          redo(){
            if(that.reformlist.length===0){
              console.log("nothing redo")
              return false
            }
            var record = that.reformlist.pop()
            record.do()
            that.revokelist.push(record)
          }

        }
        const commandManager = new CommandManager()
        commandManager.execute(record)
        const member = this.functionsList
        const group = this.revokeList;
        const addAction = {
          // 本次动作的正向操作方法
          do: () => {
            group.push(member)
          },
          // 逆操作方法
          undo: () => {
            const index = group.indexOf(member)
            if (index !== -1) {
              group.splice(index, 1)
            }
          }
        }
      },

<img src="../../assets/img/program/program-operation-revoke-default.svg" @click="revokeList"/>
<img src="../../assets/img/program/program-operation-reform-default.svg" @click="reformList"/>

你期待的结果是什么？实际看到的错误信息又是什么？

我希望能借鉴前面两篇文章完成可重复多次点击撤销恢复的功能。