vue+TS+(vue-gird-layout)简单实现撤销功能

公司业务，使用vue-gird-layout实现能够添加模块等各种字段，可以对字段进行修改大小和位置，达到做出PDF，现要求实现撤销到上一步，主要是对数据的处理操作。数据结构算法思想很有必要学习

实现技巧：主要使用两个数组进行保存数据，一个是保存历史状态，，一个是保存现阶段操作老的状态

注意点⚠️：存储数组数据的时候必须要使用JSON.parse(JSON.stringify(data))，不然存储的数据会覆盖上一个数组

<el-button @click="backOut" :disabled="BackShow">撤销</el-button>
---------------------------------------------------------------------------------
<grid-layout
	:layout="layoutData"
	:col-num="1008"
	:row-height="rowHeight"
	:is-draggable="draggable"
	:is-resizable="true"
	:is-mirrored="false"
	:vertical-compact="false"
	:margin="[0, 0]"
	:use-css-transforms="false"
	:prevent-collision="true"
	@layout-created="layoutCreatedEvent"
	@resized="resizedEvent"
	>
	    <grid-item
	      v-for="item in layoutData"
	      :key="item.i"
	      :x="item.x"
	      :y="item.y"
	      :w="item.w"
	      :h="item.h"
	      :i="item.i"
	      @moved="movedEvent">
	      <div @click="showDetailDialog(item)">
            // 动态控制修改item的属性
          </div>
	    <grid-item>
</grid-layout>
---------------------------------------------------------------------------------------
// 定义页面里面的数据
layoutData:[] //当前页面所有的字段的状态
private historyLayOutData: any = [] // 存储历史数据
private nowLayoutData: any = [] //存储已经保存的数据 
// 点击的时候能拿到item
showDetailDialog(item){}

//gird-layout初始化事件
layoutCreatedEvent(){}

// 在获取layout界面元素时 初始化historyLayOutData和将界面数据赋值给nowLayoutData
this.nowLayoutData = JSON.parse(JSON.stringify(this.layoutData))
this.historyLayOutData = []

// layout- item  移动完成触发
// 1.移动的完成，将之前存储的nowLayoutData  push到历史数据中 
// 2.然后再将移动完的新数据存储到nowLayoutData中
// **相当于备份了前一步的操作数据**
movedEvent(){
 this.historyLayOutData.push(JSON.parse(JSON.stringify(this.nowLayoutData)))
 this.nowLayoutData = (JSON.parse(JSON.stringify(this.layoutData))) 
}

// 改变大小 和移动位置一样
resizedEvent() {
  this.historyLayOutData.push(JSON.parse(JSON.stringify(this.oldLayoutData)))
  this.oldLayoutData = (JSON.parse(JSON.stringify(this.layoutData)))
}


// 撤销按钮
// 1.从历史数据(也就是上一步的全部数据，这个数据的最后一步相当于前一步操作的位置)中取出最后一步赋值给本页数据（完成撤销操作）
// 2.然后将撤销完成的数据保存到已完成移动的当前数据中
// 3.然后将历史数据中的最后一步删除，因为历史数据始终要保持，是当前操作的前一步操作，所以要删除最后一步（当前的一步）
backOut() {
  this.layoutData = this.historyLayOutData[this.historyLayOutData.length - 1]
  this.nowLayoutData = JSON.parse(JSON.stringify(this.layoutData))
  this.historyLayOutData.pop()
}

vue-grid-layout插件（APi）：https://jbaysolutions.github.io/vue-grid-layout/zh/guide/

---

多页打印样式会错乱，已解决，将最外层的layout动态绑定一个空数组即可