在vue项目中 undo 和 redo 功能的实现

功能介绍

undo 和 redo 操作相当于在 Windows系统中的撤销（ctrl + z）和反撤销（ctrl + y）。

遇到问题

最近遇到的问题，项目中有许多筛选条件（filter）（有多个选择条件的input多选框），需要有能够撤回原来操作以及还原到最新一次的操作的需求。

由于这些 filter 的字段都写在了全局变量中（filter 的结果控制了两个页面的显示数据），以此，我首先尝试了第一个方法：

• 将每次选择都记录下来，放在全局变量中的一个数组对象中，再加入计数的值，每次向数组对象中加入值的时候，就将计数值加1。当 undo（撤销） 的时候取出状态中的计数的值，将值就是数组对象的 index ，可以将最后一次操作的状态值取出并传入全局状态中，这样就可以得到上一次查询的 filter 的结果了。

注意： 在插入不同 input 的 filter 条件时需要将该 filter 的默认值插入进去

这种方法对于多个查询 input 框有一个问题：对于 index 的选取不能很好的把握，从而导致不能正确的修改 filter 的值，出现错乱。

第二种方法是：

• 将整个状态都加到一个数组对象中，将这个数组对象放入全局状态中，再加入计数的值。在每次 undo 时，将计数的值和数组对象深拷贝，取到上次的值后再将这两个值赋值给当前状态，这样就保证了数组中有所有的步骤的记录，以便 redo。

这个方法相比于之前的方法，只需要插入一次初始状态的所有的值就可以，不需要对于每个 input 的 filter 都再插入一次初始值。更加方便的取到每个步骤的 index。

当操作 undo 或 redo 的数组列表的 index ！= length-1 时（index 在数组列表的中间时），当再进行增加操作就可以将数组对象的 index 后的舍去，将新的加到 数组对象 index 后，形成一个新的数组对象。