分段创建产品,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 表单页面里非常常见。

相关推荐
摇滚侠6 小时前
SpringBoot3+Vue3 全套视频教程 45-51
前端·javascript·vue.js
触底反弹7 小时前
🔥 RAG 到底是怎么工作的?掰开揉碎了给你讲明白!
javascript·人工智能·后端
Hilaku7 小时前
前端大裁员背后的恐慌:我们还剩什么底牌?
前端·javascript·程序员
云空7 小时前
《Three.js 3D实例大全》
开发语言·javascript·3d·three.js
咖啡无伴侣7 小时前
unplugin-auto-import 使用详解+面试高频考点
前端·架构
搬砖记录员7 小时前
录屏文件打不开?H.265兼容性踩坑与4种实战方案
前端
明月_清风8 小时前
SEO 完全指南:从底层原理到实战应用场景
前端·seo
云空8 小时前
《Three.js 3D坦克对战【AI单机版】》
javascript·人工智能·3d·three.js
默_笙8 小时前
🚲 手写一个"Claude Code":我用 LangChain + ReAct 循环,让 AI 自己读文件、解释代码
前端·javascript
星河耀银海8 小时前
框架结合:Vue+HTML5+AI实现智能前端应用开发
前端·vue.js·html5