分段创建产品,tab 页切换又要保留缓存

你的分析方向是对的,而且这不是"立刻整页刷新"能优雅解决的问题。

本质上它更像前端里的 多视图同实体数据新鲜度问题 ,也可以叫 keep-alive 缓存下的 stale data / cache invalidation / 同一业务对象跨页面状态同步问题。它有并发场景,但不是传统意义上的前端线程并发。真正危险的是:一个页面持有旧快照,另一个页面改了同一个产品,旧页面如果继续保存,可能把新结构覆盖掉,形成"陈旧数据保存"。

我看代码后,工厂端原因很明确:ProductTemplateConfig 路由开启了 keepAlive,见 offerings.ts (line 34);布局层会把路由组件包进 KeepAlive,见 content.vue (line 109)。但价格及模板配置页 create-template.vue (line 1306) 只在 onMounted 拉一次 getSpuInfoDetail,没有像产品编辑页那样在 onActivated 或 route.fullPath 变化时重新初始化。产品编辑保存后会关闭当前 tab 再 router.back(),回到原来的价格配置页时,这个页面是缓存实例,不会重新 mounted,所以看到的是旧的工艺、颜色、规格等。

比较好的方案不是自动刷新页面,而是做"同产品更新感知 + 草稿保护 + 可合并刷新":

  1. 产品基本信息保存成功后,发布一个前端事件或 Pinia 状态,例如 productBaseChanged({ app, productId, changedFields, updatedAt/version })。
  2. 价格及模板配置页、分销编辑匹配信息、编辑价格页监听这个事件。只有 productId 相同才处理,不同产品不受影响。
  3. 如果目标页面没有用户未保存内容,可以静默重新拉详情并更新。
  4. 如果有未保存内容,显示提示:产品基本信息已更新,可能影响工艺、颜色、规格、SKU、模板位置,是否刷新基础信息。用户选择刷新时,不整页刷新,而是重新请求接口后做局部合并。
  5. 合并策略要保留用户已填的价格、SKU启用状态、模板配置等草稿;用稳定 key,比如 skuId 或 colorId + specDetailId 匹配。新增颜色/规格就新增行,删除颜色/规格则提示这些草稿将失效。
  6. 保存前再校验一次版本。如果后端能提供 baseInfoVersion / updatedAt / revision,前端带着版本保存,后端发现旧版本就返回冲突提示,这才是处理跨电脑、跨用户并发的关键。

你说"如果别人别的电脑修改了,我无法感知"也基本正确。纯前端确实无法天然知道,除非后端提供 WebSocket/SSE、轮询、或保存前版本校验。最现实的组合是:同浏览器内用前端事件即时通知;跨设备靠版本号和保存前校验兜底;需要实时再上 WebSocket。

分销端也同类。create-public.vue 编辑页也是只在 onMounted 初始化,见 create-public.vue (line 2244)。编辑匹配信息、编辑价格抽屉虽然打开时会拉 getUnformedSkuMatchingInfo,见 match-info-edit-drawer.vue (line 33) 和 match-info-price-drawer.vue (line 22),但它们也依赖父级传入的 row 快照;如果基本信息变了但抽屉一直开着,同样会 stale。

所以结论是:你的"同一个 id 更新后通知价格配置页,让用户决定是否刷新"是合理的。更完整的工程方案是加版本/指纹、dirty 判断、局部合并刷新和保存前冲突校验。这个问题在后台管理系统、多标签页 SPA、keep-alive 表单页面里非常常见。

相关推荐
程序员黑豆15 小时前
Java 注释详解:单行、多行与文档注释的完整指南
java·前端·ai编程
剪刀石头布啊15 小时前
antd中可编辑表格中巧用useWatch实现联动高性能效果,以及定制延伸学习
前端
油丶酸萝卜别吃16 小时前
前端转全栈学习路线
前端·学习
浮生望16 小时前
前端路由进阶:History API原理与手写HistoryRouter
前端
陆枫Larry16 小时前
JavaScript 中的竞态是什么,为啥会有竟态?
前端
上海安当技术18 小时前
半天接入:USBKey RESTful API + C 动态库,Web 和 C/S 两套集成路径实战
前端·后端·restful·集成·usbkey
DevUI团队19 小时前
从“即兴创作”到“规格先行”,华为云码道(CodeArts)代码智能体持续深耕企业级规范驱动开发能力
前端·人工智能·后端
weixin_4316004420 小时前
NestJS 入门(3):Guard 如何挡住未登录请求?
前端·后端·学习·nest.js
avi911120 小时前
[AI教做人]AI平台做2项目;一个3D模型展示,另一个框架多人
javascript·人工智能·ai·3d模型·3d引擎·顶点和法线
kyriewen20 小时前
我用Claude Code两天干完了团队两周的排期——周报发出去那一刻我就后悔了
前端·javascript·ai编程