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

相关推荐
半个落月3 小时前
LangSmith 全链路观测(下):用 Dataset 与 LLM Judge 量化评估 RA
javascript·langchain
半个落月4 小时前
LangSmith 全链路观测(上):用 LangGraph 与 Milvus 构建可追踪的 RAG 客服
javascript·langchain
Java后端的Ai之路4 小时前
06-React-Props
前端·react.js·前端框架
半个落月4 小时前
LangChain.js Agent 中间件实战:生命周期、动态工具与文件权限
javascript·langchain
Flynt5 小时前
开源"间谍卫星"说数据全是真的,我把它的免key数据源挨个试了一遍
前端·开源·数据可视化
Csvn5 小时前
渲染管线
前端
程序员大阳5 小时前
副队长CSS教程(33)–圆角与透明
前端·css·透明·圆角
志尊宝6 小时前
Vue3 零基础每日笔记(082):文件上传实战——el-upload 校验、自定义上传、头像预览
前端·javascript·vue.js·笔记·#javascript·#vue.js
鬼手点金6 小时前
opencode-rules 插件
java·开发语言·前端·人工智能·chrome·git·github
柳杉6 小时前
借助 Codex 和可视化工作流,从调研到完整实现,3D 大屏竟然可以这么简单
前端·ai编程·数据可视化