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

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

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

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

// 特殊字段
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);
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/654632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP语法

#本来是在学命令执行&#xff0c;所以学了学&#xff0c;后来发现&#xff0c;PHP语法和命令执行的关系好像没有那么大&#xff0c;不如直接学php的一些命令执行函数了。# #但是还是更一下&#xff0c;毕竟还是很多地方都要求掌握php作为脚本语言&#xff0c;所以就学了前面的…

HR:年底了如何分钱,比亏钱更可怕的是“亏”员工

年底了&#xff0c;很多企业家朋友在聊一个话题&#xff1a;如何分钱&#xff0c;激励员工创造更大的价值&#xff1f;分钱很重要&#xff0c;但分钱也特别难。 钱分对了&#xff0c;管理的一大半问题就解决了。钱分得不对&#xff0c;一大堆新的问题就出现了。最坏的结果&…

514.自由之路

一个字符串 ring ,表示刻在外环上的编码;给定另一个字符串 key ,表示需要拼写的关键词。您需要算出能够拼写关键词中所有字符的最少步数。 最初,ring 的第一个字符与 12:00 方向对齐。您需要顺时针或逆时针旋转 ring 以使 key 的一个字符在 12:00 方向对齐,然后按下中心按…

docker真的好难用啊,为什么说它移植性好啊?

对于首次接触 Docker 新人来说&#xff0c;Docker 确实存在一定的门槛&#xff0c;主要可能需要适应的几个点如下&#xff1a; 1、 概念理解&#xff1a; Docker 自身引入了很多新概念&#xff0c;比如镜像&#xff08;Image&#xff09;、容器&#xff08;Container&#xff…

HTML新手教程

HTML入门 教程&#xff1a;【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili 一.初识HTML HyperTextMarkupLanguage&#xff08;超文本标记语言&#xff09; 超文本包括&#xff1a;文字、图片、音频、视频、动画。 HTML5的优势 世界知名浏览器厂商对HTML5的支持市场的…

无人值守变电所运维在海南市某住宅区的应用

1 前言 随着国家电网改革政策的逐步推进和落实&#xff0c;AcrelCloud-1000变电所运维云平台运用互联网和大数据技术&#xff0c;为电力运维公司提供变电所运维云平台。该平台作为连接运维单位和用电企业的纽带&#xff0c;监视用户配电系统的运行状态和电量数据&#xff0c;为…

Vue3使用setup-extend简化组件名写法

如果我们在Vue3中要使用setup的语法糖&#xff0c;就需要使用两个script标签&#xff0c;一个用于设置组件的name属性&#xff0c;一个用于编写setup中的代码。如下&#xff1a; 但是我们有觉得光是因为一个name属性就多写一个script标签有点麻烦了。 因此我们可以使用插件来进…

【Python笔记-设计模式】抽象工厂模式

一、说明 (一) 解决问题 抽象工厂是一种创建型设计模式&#xff0c;主要解决接口选择的问题。能够创建一系列相关的对象&#xff0c;而无需指定其具体类。 (二) 使用场景 系统中有多于一个的产品族&#xff0c;且这些产品族类的产品需实现同样的接口。 例如&#xff1a;有…

AI对话软件哪个好?首选这3款堪称神器的AI工具!

在过去的一年里&#xff0c;AI对话软件无疑深度嵌入到了我们工作或生活的方方面面&#xff0c;成为了我们的得力助手。它们可以帮我们解决问题&#xff0c;提供信息&#xff0c;甚至陪伴我们度过孤独的时刻。 但是&#xff0c;面对市场上数量众多的AI对话软件&#xff0c;你是…

arcgis 批量删除字段

一、打开ArcToolbox-数据管理工具-字段-删除字段。 二、在输入表中选择要删除字段的要素&#xff0c;在删除字段栏中选择要删除的字段&#xff0c;点击确认即可。

【C语言】深入理解指针(4)回调函数

目录 回调函数 回调函数的应用 i&#xff0c;简化代码逻辑 ii&#xff0c;实现上下机之间的通讯 回调函数 回调函数就是⼀个通过函数指针调用的函数。 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被用来调用其所指向…

嵌入式软件工程师面试题——2025校招社招通用(C/C++)(四十五)

说明&#xff1a; 面试群&#xff0c;群号&#xff1a; 228447240面试题来源于网络书籍&#xff0c;公司题目以及博主原创或修改&#xff08;题目大部分来源于各种公司&#xff09;&#xff1b;文中很多题目&#xff0c;或许大家直接编译器写完&#xff0c;1分钟就出结果了。但…

老龄化对投资意味着什么?

1月15日&#xff0c;国务院办公厅印发《关于发展银发经济增进老年人福祉的意见》从4个方面提出26项举措&#xff0c;为我国首个以“银发经济”命名的政策文件。 近期&#xff0c;国信证券分析师王开发布题为《银发经济再思考&#xff1a;老龄化对投资的影响》的报告&#xff0…

小程序学习-23

开始做uni-app开发项目 安装了HBuilder X&#xff0c;具体可参考 1. 起步 | uniapp - 黑马优购xx​​​​​​​x 学到P97 转战vue&#xff0c;加油&#xff01; 坚持就是胜利

Hive(15)中使用sum() over()实现累积求和和滑动求和

目的&#xff1a; 三个常用的排序函数row_number(),rank()和dense_rank()。这三个函数需要配合开窗函数over()来实现排序功能。但over()的用法远不止于此&#xff0c;本文咱们来介绍如何实现累计求和和滑动求和。 1、数据介绍 三列数据&#xff0c;分别是员工的姓名、月份和…

异步控制并发数

异步控制并发数通常用于限制同时进行的异步操作数量&#xff0c;以避免资源过度占用或网络请求过多导致的性能问题。在 JavaScript 中&#xff0c;可以使用 Promise、async/await 等语法来实现异步控制并发数。 下面是一个简单的示例代码&#xff0c;实现了同时执行3个异步操作…

源聚达科技:开一家抖音店铺怎么做最好

在数字化浪潮的推动下&#xff0c;抖音不仅是年轻人展示才华的舞台&#xff0c;也成为商家争夺流量的新阵地。开一家抖音店铺&#xff0c;看似简单&#xff0c;实则需要精心策划和周到运营。 首要任务是确立店铺定位。正如古人云“磨刀不误砍柴工”&#xff0c;明确目标受众和主…

神经网络建立(结果可变)最小神经元

目录 介绍&#xff1a; 初始化&#xff1a; 建模: 预测&#xff1a; 改变结果&#xff1a; 介绍&#xff1a; 在深度学习中&#xff0c;神经元通常指的是人工神经元&#xff08;或感知器&#xff09;&#xff0c;它是深度神经网络中的基本单元。深度学习的神经元模拟了生…

JavaWeb基础01-基本技术体系介绍和相关工具的安装

一、JavaWeb 1.概述 Web&#xff1a;全球广域网&#xff0c;也称为万维网(www)&#xff0c;能够通过浏览器访问的网站JavaWeb&#xff1a;是用Java技术来解决相关web互联网领域的技术栈 2.组成 &#xff08;1&#xff09;网页&#xff1a;展示数据&#xff08;前端技术&…

计算机网络·网络层

网络层 网络层提供的两种服务 争论&#xff1a; 网络层应该向运输层提供怎样的服务&#xff1f;面向连接还是无连接&#xff1f; 在计算机通信中&#xff0c;可靠交付应当由谁来负责&#xff1f;是网络还是端系统&#xff1f; 2 种观点&#xff1a; 面向连接的可靠交付。 无连…