bindbox-game/.trae/documents/修复 Vue watcher 中“resetForm 未初始化”错误的改造方案.md
邹方成 87ad4177b1
Some checks failed
Build docker and publish / linux (1.24.5) (push) Failing after 39s
feat(工作台): 实现管理端工作台接口并优化数据展示
feat(抽奖动态): 修复抽奖动态未渲染问题并优化文案展示
fix(用户概览): 修复用户概览无数据显示问题
feat(新用户列表): 在新用户列表显示称号明细
refactor(待办事项): 移除代办模块并全宽展示实时动态
feat(批量操作): 限制为单用户操作并在批量时提醒
fix(称号分配): 防重复分配称号的改造计划
perf(接口性能): 优化新用户和抽奖动态接口性能
feat(订单漏斗): 优化订单转化漏斗指标计算
docs(测试计划): 完善盲盒运营API核查与闭环测试计划
2025-11-16 14:00:29 +08:00

1.8 KiB
Raw Blame History

问题分析

  • 组件 coupon-dialog.vuesetup 中使用了:
    watch(() => props.data, (newData) => { ... else { resetForm() } }, { immediate: true })
    
  • resetForm 在源码中以 const resetForm = () => { ... } 形式定义在 watch 之后。由于 immediate: true 会在初始化阶段立即执行回调,导致在 resetForm 尚未初始化之前被调用,抛出 ReferenceError: Cannot access 'resetForm' before initialization

修复方案

  1. resetForm 改为函数声明并上移到 watch 之前:
function resetForm() {
  form.value = { name:'', coupon_type:1, discount_type:1, discount_value:0, valid_days:30, status:1, remark:'' }
}
  • 函数声明具备提升hoisting不会出现“未初始化”问题。
  • 位置调整到 rulesdialogTitle 定义之后、watch(props.data, ...) 之前。
  1. 保留 immediate: true(业务期望首次打开时即填充/重置),无需改动;如需更稳健可补充 flush: 'post',但此处核心是函数提升顺序问题。

  2. 可选强化

  • 如同时监听 visible,建议统一在 watch 中使用已声明的 resetFormfillFormFromProps(newData) 两个函数,避免将逻辑直接写在回调内。
  • 若依赖 formRef.resetFields() 的时机,考虑在 handleClose 使用 nextTick 保证 DOM 与表单实例可用。

变更清单

  • 文件:web/admin/src/views/operations/coupons/modules/coupon-dialog.vue
  • 改动:
    • resetForm 改为函数声明并移动到 watch 之前。
    • (可选)在 watch 的第三参数加入 flush: 'post'

验收

  • 打开/切换数据源时不再出现 ReferenceError
  • 创建/编辑模式下首次加载和重置行为保持一致(immediate: true 生效)。

确认后我将按上述方案修改代码并验证。