恒美微站 Logo 恒美微站
  • 首页
  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心
  • 联系我们

dragUI架构全景图:Vuex状态管理与本地存储如何记住你的每一次设计

  • 首页
  • 资讯中心
  • /
  • dragUI架构全景图:Vuex状态管理与本地存储如何记住你的每一次设计

相关资讯

判断VQVAE是否“学废了“的两个神奇指标:deep-vector-quantization中perplexity与cluster_use详解 2026/8/25 17:40:14
Java Excel导入导出的健壮校验设计与POI实战 2026/8/25 17:40:14
从NeRF到Relightable3DGaussian:实时点云重光照的5大技术突破与实现路线对比 2026/8/25 17:35:14

最新资讯

Ubuntu 22.04 裸机安装全攻略:从驱动兼容到系统优化
Matplotlib核心架构与面向对象绘图:从Figure/Axes到高级定制
AI求职工具:多平台自动投递与智能匹配技术解析
Python自动化批量导入TXT单词到有道词典生词本
OpenClaw Skills技能系统:从部署到开发,构建可扩展AI智能体
AI面试高频考点解析与实战技巧

今日推荐

三步把QQ空间历史说说导出到本地:GetQzonehistory 极简指南
洛谷 P7912:[CSP-J 2021 T4] 小熊的果篮 ← 双向链表
Transformers.js 网页端图像抠图实战:零后端 3 行代码返回透明 PNG

本周热门

Nextcloud 桌面客户端:把同步交给它,你只管改文件
如何将 HTML 转成 Word 文档且格式不丢失?html-to-docx 使用教程
Anki 批量操作卡片完整指南:一次搞定上千张,不再逐张修改

本月精选

如何用DamaiHelper实现演唱会门票的智能自动化抢购:完整技术解决方案指南
第4篇:59 倍性能差距的索引瓶颈定位——一次教科书级的全表扫描调优
终极歌词批量下载神器:5分钟解决离线音乐库歌词同步难题

dragUI架构全景图:Vuex状态管理与本地存储如何记住你的每一次设计

发布时间:2026/8/25 17:40:14
dragUI架构全景图:Vuex状态管理与本地存储如何记住你的每一次设计 dragUI架构全景图Vuex状态管理与本地存储如何记住你的每一次设计【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUIdragUI是一款基于 vuedraggable.js uni-app 的可视化拖拽编程工具拖个按钮、调个颜色就能自动生成完整项目代码。很多人好奇拖完组件后关掉页面设计怎么没丢答案就藏在它的Vuex 状态管理与本地存储双层架构里。这篇文章带你用 5 分钟看懂 dragUI 是如何记住你的每一次设计。 一图看懂编辑区状态从哪里来先把视线扫一遍界面上面这张图左侧组件拖拽区基础组件、ColorUI 组件、表单组件分门别类中间手机预览画布拖进来即所见即所得右侧目录 / props / 属性 / 自定义编辑选中元素的样式你在右侧面板里改一下字体颜色、调一下内边距——这些操作并不是直接写文件而是先变成数据存进 Vuex再由本地存储模块落盘。这是理解 dragUI 架构的关键一切皆数据。️ 架构全景一个 Store 四个模块 一个存储层dragUI 的状态中心在 store/index.js它注册了四个模块各司其职模块文件路径职责projectstore/modules/project.js整个项目的文件树、新建/删除项目、选中文件currentCheckAttrstore/modules/currentCheckAttr.js当前选中的组件、它的样式iStyle和样式类iClasspatternComponentsstore/modules/patternComponents.js自定义组件我的组件的模板列表euEditToolstore/modules/euEditTool.js新建项目、新建文件的模态框开关而根 store 本身还托管了一份componentsInfo按钮、输入框、轮播图等所有内置组件的默认属性模板props 默认值、可选项按 id 区间划分——0~999 是基础组件、1000~1999 是 ColorUI 组件、2000~2999 是表单组件这个约定见 store/index.js 中的componentsInfo。 小技巧右侧面板里每个属性控件文本框、下拉框、颜色选择器其实就是由propsValue里的配置数据驱动渲染的所以改配置就能改面板。 本地存储五个 Key 记住五种记忆所有持久化逻辑集中在 common/js/localStore.js它基于uni.setStorage封装用五个 Key 分类存储Key存了什么对应记忆FOLDER_LIST_KEY项目文件树 每个页面的组件拖拽数据我建过哪些项目、画过什么页面STYLE_LIST_KEY用户自定义的样式属性项我在样式面板里加过哪些属性CLASS_LIST_KEY全局自定义样式类我写过的 class 样式COMPONENT_DATA_KEY自定义组件模板我封装过哪些自己的组件BASICS_COMPONENT_DATA_KEY内置组件的属性模板我改过哪些组件的默认值存储策略很直白JSON.stringify 写入JSON.parse 读出读不到就返回空数组/空对象兜底永远不会让程序崩在首次打开上。 记忆的一生启动恢复 → 编辑写入 → 自动落盘整个数据流只有三步非常好记1️⃣ 启动恢复读应用启动时在 App.vue 的onLaunch里 dispatch 一个initData它依次派发五个初始化 action见 store/index.js 中的initDatainitProject→ 读FOLDER_LIST恢复项目文件树initCustomClass→ 读CLASS_LIST恢复全局样式类initFromStyleList→ 读STYLE_LIST恢复样式属性面板initComponentsList→ 读COMPONENT_DATA恢复自定义组件initComponentsInfo→ 读BASICS_COMPONENT_DATA恢复组件默认值2️⃣ 编辑写入改你在画布上拖拽、点选、改样式触发的是各模块的 mutation例如选中组件改内边距走 store/modules/currentCheckAttr.js 的setCurrentCheckItemStyle选中状态由currentCheckIndex形如0-1-2的层级下标精确定位到嵌套组件。3️⃣ 自动落盘存凡是会影响持久化的 mutation内部都会顺手调用一次cachesXxx新建/删除项目 →cachesFolder见 store/modules/project.js 的addNewProject、deleteProject保存自定义组件 →cachesPatternComponents修改全局样式类 →cachesClass所以你在文档里看到的几乎任何编辑都会实时保存到浏览器中本质就是每个 mutation 尾部挂了一个本地存储调用——无定时器、无手动保存按钮改了就存了。 想看源码从这三个文件切入状态入口store/index.js —— 根 state、mutations、initData启动流程持久化层common/js/localStore.js —— 五个 Key 的读写封装项目数据模型store/modules/project.js 项目默认结构 common/js/projectDefaultData.js再配合拖拽引擎 common/js/vuedraggable.js 和右键菜单 common/js/vue-context-menu.jsdragUI 的编辑闭环就完整了拖拽产生数据 → Vuex 同步状态 → 本地存储持久化 → 下次启动原样恢复。这就是记住你的每一次设计的全部秘密——没有魔法只有一套干净的状态流。【免费下载链接】dragUI基于vuedraggable.js uni 的可视化拖拽编程自动生成项目自动生成代码自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于恒美微站

恒美微站专注于为个体商户、工作室提供极简自助建站服务,让每个人都能轻松拥有专业网站。

快速链接

  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心

服务项目

  • 可视化建站
  • 拖拽编辑
  • 主题定制
  • SEO 优化
  • 网站托管

联系方式

  • 📍 地址:北京市朝阳区建国路 88 号
  • 📞 电话:400-888-8888
  • ✉️ 邮箱:info@hmyw.cn
  • 🕐 时间:周一至周日 9:00-18:00

© 2024 恒美微站 hmyw.cn 版权所有 | 京 ICP 备 12345678 号