Vuex 不适合存储大文件或二进制数据，因其设计用于管理轻量、可响应的结构化状态。存入 Blob 等会导致内存暴涨、响应变慢、DevTools 卡顿甚至崩溃；且原生类型无法被 Vue 响应式系统正确监听，易引发序列化错误与内存泄漏。
Vue Store（Vuex）本身不适合直接存储大文件或二进制数据，比如 Blob、ArrayBuffer、图片流、Excel 文件等。Store 的设计目标是管理轻量、可响应、结构化的应用状态（如用户信息、菜单展开项、表单字段值），而非承载原始二进制载荷。把几 MB 甚至上百 MB 的二进制内容塞进 state，会导致内存暴涨、响应变慢、DevTools 卡顿，甚至触发浏览器崩溃。
为什么不能把二进制数据存进 Vuex state？
• Vuex state 是响应式对象，Vue 会对其中所有属性做 getter/setter 劫持；而 Blob、ArrayBuffer 等原生类型无法被 Vue 深度监听，强行存入会丢失响应性，还可能引发序列化错误（例如 SSR 或 Vuex 插件持久化时）
• Store 数据会被 DevTools 快照、日志、时间旅行调试捕获——二进制内容既无意义又极占空间
• 大量二进制数据驻留内存，影响 GC 效率，尤其在频繁上传/下载场景下易造成内存泄漏
正确做法：用 Store 管理元信息，用内存/临时引用托管二进制体
把“要不要下载”“下载进度”“文件名”“MIME 类型”“临时 URL”等轻量元数据存在 store 中，真正的二进制内容通过局部变量、闭包、或浏览器原生 API（如 URL.createObjectURL）按需持有：
- 上传场景：用
File对象（来自 input[type=file]）直接传给请求方法，不存入 state；store 只存{ uploading: true, fileName: 'report.pdf', progress: 65 } - 下载场景：API 返回 blob 后，立即用
URL.createObjectURL(blob)创建临时链接，store 记录该 URL 和文件名；下载完成即调用URL.revokeObjectURL(url)释放内存 - 预览场景（如图片）：将 blob 转为 object URL 后赋给
<img :src="previewUrl">，store 只维护previewUrl字符串，不存 blob 本身
需要跨组件共享二进制数据时怎么办？
不走 store，改用更合适的机制：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 事件总线或 provide/inject：适用于父子/祖孙组件间短生命周期传递（如子组件上传成功后通知父组件刷新列表并展示缩略图）
-
全局 Map 缓存：创建一个
const binaryCache = new Map()（放在 utils/binary-cache.js），用唯一 ID 作为 key 存 ArrayBuffer/Blob，store 中只存该 ID；组件使用完主动cache.delete(id) - 服务端临时存储 + token 下发：对超大文件（如视频切片），前端上传后由后端返回 token，后续操作（转码、预览、合并）都靠 token 请求，store 只管 token 和状态标识
如果非要“关联”二进制与 store 状态，推荐这样组织
定义清晰的 state 结构，让二进制始终是外部资源、state 只是它的“索引”和“描述”：
state: {
currentReport: {
id: 'rep_789',
name: 'Q2_Financial_Report.xlsx',
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
size: 2456891,
url: 'blob:http://localhost:8080/abc123-def456', // object URL
loadedAt: 1717894321000,
previewReady: true
}
}
对应 mutations 只更新这些字段；实际的 blob 创建和销毁，在 action 内部完成，与 store 解耦。
