vue-mc Model 完全指南defaults、mutations、validation 三大核心概念详解【免费下载链接】vue-mcModels and Collections for Vue项目地址: https://gitcode.com/gh_mirrors/vu/vue-mcvue-mc是一款为 Vue 提供 Models 和 Collections 的轻量级数据管理库。它的 Model 类通过三大核心概念组织前端数据defaults()默认属性、mutations()属性转换和validation()验证规则。只需重写这三个方法你就能看到数据从初始化、类型转换到表单验证的完整闭环非常适合刚接触 Vue 数据流的新手。一分钟理解Model 的三种属性状态在深入三大概念之前先认识图中这三个状态见 官方文档 的 Attribute states 一节状态含义谁来定义EMPTY模型的空白初始状态由defaults()方法返回ACTIVE当前正在编辑的活跃状态task.name访问的就是它用户交互、表单绑定SAVED事实来源通常对应数据库中的已保存数据保存成功后自动sync()defaults()把 EMPTY 填充进 ACTIVE —— 这就是为什么每个属性都应该在defaults()中声明默认值否则它在 Vue 中不会响应式。sync()把 ACTIVE 写入 SAVED保存成功时自动执行。clear()回到 EMPTYreset()则回到 SAVED —— 表单取消按钮只需一行reset()代码。核心概念 1用 defaults() 定义默认属性defaults()定义了模型的空状态相当于表单的初始值。以任务模型为例参考 basic-usage 文档class Task extends Model { defaults() { return { id: null, name: , done: false, } } }三个关键行为构建时自动填充new Task({name: Tests})后task.name是Tests而task.done自动为falsetask.id自动为null—— 即使你没有传这些值。保证响应式Vue 只能追踪提前声明的属性。defaults()声明了哪些字段哪些字段才能安全地v-model绑定。清除与重置clearAttributes()会把 ACTIVE 和 SAVED 一起回滚到defaults()的副本见 Model.ts 第 367-372 行。 记忆技巧defaults() 表单没填时的样子。核心概念 2用 mutations() 做属性类型转换浏览器里几乎所有输入都是字符串。用户勾选框给你true输入框给你123。mutations()就是每个属性的数据清洗管道在属性写入模型前自动转换mutations() { return { id: (id) Number(id) || null, // 字符串 → 数字 name: String, // 强制转字符串 done: Boolean, // 强制转布尔值 } }进阶技巧 —— 使用数组定义管道多个函数按顺序执行见 Model.ts 第 309-311 行 的compileMutators()实现name: [String, (v) v.trim()] // 先转字符串再去除首尾空格模型通过以下选项控制何时执行转换mutateBeforeSync默认true同步到 SAVED 状态前转换mutateBeforeSave默认true发起保存请求前转换mutateOnChange默认false用户输入过程中实时转换会打断输入一般关闭核心概念 3用 validation() 写内置验证规则vue-mc 自带一套可链式的验证规则实现位于 Validation/index.ts让你不必再为前端验证引入额外依赖。规则通过and/or自由组合import { boolean, equal, integer, min, required, string } from vue-mc/validation validation() { return { id: integer.and(min(1)).or(equal(null)), // 必须是 ≥1 的整数或为 null name: required.and(string), // 必填且为字符串 done: boolean, // 必须是布尔值 } }规则求值的运算顺序是先检查基础规则失败则立即返回错误消息按链式顺序检查所有and规则再按链式顺序检查所有or规则验证结果统一挂在model.errors上模板里一行v-for就能渲染input v-modeltask.name span v-forerror in task.errors.name{{ error }}/span常用选项速查选项默认值作用validateOnSave按场景保存前自动验证不通过则请求直接失败validateOnChangefalse属性变化时即时验证单个字段validateRecursivelytrue递归验证嵌套的模型/集合见 Model.ts 第 285-288 行useFirstErrorOnlyfalse只展示第一条错误消息vue-mc 内置 30 规则email、length(2, 8)、url、match(/^[a-z]$/)、before/after日期、same(otherField)等完整清单可查阅 models.md 的 Available rules 表格。你还能用validation.rule({...})自定义规则并用validation.messages.set()定制错误文案、切换多语言。三大概念如何协作一个完整的 Task 示例把三者放在一起就是一个生产级模型的骨架完整示例见 basic-usage 文档class Task extends Model { defaults() { // 1️⃣ 空状态 return { id: null, name: , done: false } } mutations() { // 2️⃣ 类型清洗 return { id: (id) Number(id) || null, name: String, done: Boolean } } validation() { // 3️⃣ 表单验证 return { id: integer.and(min(1)).or(equal(null)), name: string.and(required), done: boolean, } } routes() { return { fetch: /task/{id}, save: /task } } }一次保存的完整生命周期表单v-model修改ACTIVE状态mutateBeforeSave触发mutations字符串变为正确类型validation全部通过请求发出服务端返回 422错误自动写进model.errors模板即时标红保存成功 →sync()更新SAVED→ 模型自动加入所属 Collection总结⚙️defaults()—— 为每个属性声明初始值保证响应式与可重置mutations()—— 属性入库前的类型转换管道✅validation()—— 可链式组合的前端验证错误即model.errors掌握这三件套你就掌握了 vue-mc Model 的核心。接下来可以继续阅读 Collection 文档了解如何把多个模型组织成带路由、批量保存的集合。【免费下载链接】vue-mcModels and Collections for Vue项目地址: https://gitcode.com/gh_mirrors/vu/vue-mc创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考