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

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

【免费下载链接】dragUI基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI

dragUI是一款基于 vuedraggable.js + uni-app 的可视化拖拽编程工具，拖个按钮、调个颜色，就能自动生成完整项目代码。很多人好奇：拖完组件后关掉页面，设计怎么没丢？答案就藏在它的Vuex 状态管理与本地存储双层架构里。这篇文章带你用 5 分钟看懂 dragUI 是如何"记住"你的每一次设计。

🧭 一图看懂编辑区：状态从哪里来？

先把视线扫一遍界面（上面这张图）：

• 左侧：组件拖拽区，基础组件、ColorUI 组件、表单组件分门别类
• 中间：手机预览画布，拖进来即所见即所得
• 右侧：目录 / props / 属性 / 自定义，编辑选中元素的样式

你在右侧面板里改一下字体颜色、调一下内边距——这些操作并不是直接写文件，而是先变成数据存进 Vuex，再由本地存储模块落盘。这是理解 dragUI 架构的关键：一切皆数据。

🗂️ 架构全景：一个 Store + 四个模块 + 一个存储层

dragUI 的状态中心在 store/index.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 分类存储：

存储策略很直白：JSON.stringify 写入，JSON.parse 读出，读不到就返回空数组/空对象兜底，永远不会让程序崩在"首次打开"上。

🔄 记忆的一生：启动恢复 → 编辑写入 → 自动落盘

整个数据流只有三步，非常好记：

1️⃣ 启动恢复（读）

应用启动时在 App.vue 的onLaunch里 dispatch 一个initData，它依次派发五个初始化 action（见 store/index.js 中的initData）：

• initProject→ 读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.js，dragUI 的编辑闭环就完整了：拖拽产生数据 → Vuex 同步状态 → 本地存储持久化 → 下次启动原样恢复。

这就是"记住你的每一次设计"的全部秘密——没有魔法，只有一套干净的状态流。

【免费下载链接】dragUI基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件项目地址: https://gitcode.com/gh_mirrors/dr/dragUI