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),仅供参考