web架构师编辑器内容-添加自动保存的功能

对于频繁改动的应用，自动保存的功能是一个非常有用的功能，可以避免用户在没有保存的情况下丢失自己保存过的数据。
对于自动保存，一般有两种实现，参考语雀和石墨：

• 语雀采用的是定时保存的方式，大约在3分半后自动发送一次请求
• 石墨文档采用的是实时保存：对于文本区域，直接输入字符的时候，会发送请求，就是在文本区域onchange的时候，绑定一个事件，有新内容介入的时候发送请求。

这里我们可以采用第一种方法，定时发送请求。采用这种方式之前我们可以进行一个优化：为了避免一股脑的发送请求，比如说如果用户没有做任何操作，到时候还是会发送请求，所以呢，我们要给他添加一个特殊字段isDirty，这个字段可以标记一次数据是否有修改，加入有修改，才进行保存，这里采用的方式和做历史数据功能的方式类似，不会采用对比新旧数据比较耗时的方法，而是触发特定的mutations才会标记字段，比如说addComponent、deleteComponent、updateComponent、updatPage。

// 特殊字段
isDirty// 在一些 mutation 的时候同时修改该字段
addComponent
deleteComponent
updateComponent
updatePagestate.isDirty = true// 在 save 之后将 isDirty 置为 false
state.isDirty = false

代码实现：添加isDirty字段

// store/editor.ts
export interface EditorProps {// 供中间编辑器渲染的数组components: ComponentData[];// 当前编辑的是哪个元素，uuidcurrentElement: string;// 当然最后保存的时候还有有一些项目信息，这里并没有写出，等做到的时候再补充page: PageData;// 当前被复制的组件copiedComponent?: ComponentData;// 当前操作的历史记录histories: HistoryProps[];// 当前历史记录的操作位置historyIndex: number;// 开始更新时的缓存值cachedOldValues: any;// 保存最多历史条目记录数maxHistoryNumber: number;// 数据是否有修改isDirty: boolean;
}

然后在一系列mutations中给isDirty设置为true，这都是一系列重复的功能，这时候就想到之前使用过的高阶函数处理过浏览器的默认行为：web架构师编辑器内容-快捷键操作的实现，这里我们也可以封装成高阶函数来完成一系列操作，比较方便：

// store/editor.ts
const setDirtyWrapper = (callback: Mutation<EditorProps>) => {return (state: EditorProps, payload: any) => {state.isDirty = true;callback(state, payload);};
};// mutations
// 添加元素
addComponent: setDirtyWrapper((state, component: ComponentData) => {component.layerName = "图层" + (state.components.length + 1);state.components.push(component);pushHistory(state, {id: uuidv4(),componentId: component.id,type: "add",data: cloneDeep(component),});
})// 粘贴元素
pasteCopiedComponent: setDirtyWrapper((state) => {if (state.copiedComponent) {const clone = cloneDeep(state.copiedComponent);clone.id = uuidv4();clone.layerName = clone.layerName + "副本";state.components.push(clone);message.success("已黏贴当前图层", 1);pushHistory(state, {id: uuidv4(),componentId: clone.id,type: "add",data: cloneDeep(clone),});}
})// 删除元素
deleteComponent: setDirtyWrapper((state, id) => {const currentComponent = state.components.find((component) => component.id === id);if (currentComponent) {const currentIndex = state.components.findIndex((component) => component.id === id);state.components = state.components.filter((component) => component.id !== id);pushHistory(state, {id: uuidv4(),componentId: currentComponent.id,type: "delete",data: currentComponent,index: currentIndex,});message.success("删除当前图层成功", 1);}
})//更新元素
updateComponent: setDirtyWrapper((state, { key, value, id, isRoot }: UpdateComponentData) => {const updatedComponent = state.components.find((component) => component.id === (id || state.currentElement));if (updatedComponent) {if (isRoot) {(updatedComponent as any)[key as string] = value;} else {const oldValue = Array.isArray(key)? key.map((key) => updatedComponent.props[key]): updatedComponent.props[key];if (!state.cachedOldValues) {state.cachedOldValues = oldValue;}pushHistoryDebounce(state, { key, value, id });if (Array.isArray(key) && Array.isArray(value)) {key.forEach((keyName, index) => {updatedComponent.props[keyName] = value[index];});} else if (typeof key === "string" && typeof value === "string") {updatedComponent.props[key] = value;}}}}
)

发送完请求后，将isDirty置为false

// store/editor.ts
saveWork(state) {state.isDirty = false;
},

在onMounted生命周期里面增加对于的逻辑：

onMounted(() => {timer = setInterval(() => {if (isDirty.value) {saveWork();}}, 1000 * 50);
});
onUnmounted(() => {clearInterval(timer);
});