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

相关推荐
ℋᙚᵐⁱᒻᵉ鲸落2 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
默_笙4 小时前
🎃 前端学了 Next.js,后端该学啥?NestJS 就是 Node 版的蜜雪冰城
前端·javascript
前端snow5 小时前
ai agent --- 实现 openclaw 定时间效果
前端
码云之上5 小时前
换模型之后,Chatbot 为什么要自己做 compact?
前端·agent·前端工程化
এ慕ོ冬℘゜5 小时前
navigator 导航对象 BOM制作方法
javascript
星栈5 小时前
自定义 UI-UX-Pro-Max 的 CSV 知识库,把 AI 生成的后台拉回行业该有的样子
前端·agent·weui
研☆香5 小时前
简单的图片上传 删除 预览
前端
ITresearchGuest5 小时前
我用 AI 一小时写了一个世界杯数据可视化平台|前端 VibeCoding 初体验
前端·人工智能·信息可视化
慧一居士7 小时前
Vite项目中使用Less步骤,详细使用示例
前端·css
花间相见7 小时前
【LangChain组件03】—— LangChain Agents 执行与状态:工作流程与状态管理实战
java·前端·langchain