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，它注册了四个模块，各司其职：
| 模块 | 文件路径 | 职责 |
|---|---|---|
| project | store/modules/project.js | 整个项目的文件树、新建/删除项目、选中文件 |
| currentCheckAttr | store/modules/currentCheckAttr.js | 当前选中的组件、它的样式（iStyle）和样式类（iClass） |
| patternComponents | store/modules/patternComponents.js | 自定义组件（"我的组件"）的模板列表 |
| euEditTool | store/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 中的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
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
