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

相关推荐
kyriewen1 小时前
别再 console.log 了:5 个 Chrome DevTools 调试技巧,用过就回不去了
前端·javascript·面试
IT_陈寒3 小时前
Python搞不定字符串编码?这破玩意坑我两小时!
前端·人工智能·后端
To_OC3 小时前
LC 1 两数之和:面试第一道必考题,暴力解法直接被面试官 pass
javascript·算法·leetcode
DigitalOcean4 小时前
Laravel 开发者已在 DigitalOcean 上开通超过 10 万台服务器
前端·laravel
星始流年4 小时前
从 Tool 到 Skill——基于 LangChain 的服务端Skill实现
前端·langchain·agent
李惟4 小时前
开源本地通信库,纯客户端 RPC,像聊天一样通信
前端
YAwu114 小时前
深入解析 React 炫彩鼠标跟随标题组件:从坐标定位到动画性能
前端·react.js
GuWenyue4 小时前
排序效率低?5分钟吃透快速排序,性能飙升至O(nlogn)
前端·javascript·面试
OpenTiny社区4 小时前
🎨 看完 GenUI SDK 源码我悟了!
前端·vue.js·github
叁两4 小时前
前端转型AI Agent该如何学习?(前置篇)
前端·人工智能·node.js