vuex在数据大屏中集中管理文件流加载进度元数据而非原始流，通过模块化、唯一id标识、分阶段状态（idle/loading/success/error）及action内流读取与commit更新实现高效协同。
在数据大屏这类高实时性、多模块协同的场景中，Vuex 本身不直接处理文件流（如 ArrayBuffer、Blob 或 ReadableStream），但它可以高效地**集中维护和同步加载进度状态**，让多个组件（如图表、下载按钮、进度条、提示面板）实时感知并响应同一份进度数据。
明确进度状态的归属与结构
文件流加载不是简单“开始→结束”，而是分阶段：请求发起、响应头解析、分块读取、解码/渲染准备。Vuex 应只管理可被观测的**进度元数据**，而非原始流对象本身（流对象不可序列化，也不应存入 state）。
- state 中定义清晰字段，例如：
progressList: [{ id: 'report-2026', total: 100, loaded: 37, status: 'loading', error: null }] - 每个进度项用唯一
id标识，避免不同文件或同一文件多次触发时状态混淆 - 保留
status（'idle'/'loading'/'success'/'error'）和error，便于 UI 做状态判断
在流式读取中主动提交进度
真正读取文件流的逻辑（比如用 fetch().then(res => res.body.getReader()) 或 XMLHttpRequest 的 onprogress）必须在 actions 中执行，并在每次 chunk 到达时调用 commit 更新进度。
- 不要在组件内直接操作流并更新 Vuex；所有流控制和 commit 必须封装在 action 内
- 示例关键片段（简化）：
actions: {
startDownload({ commit }, { fileId, url }) {
commit('setLoading', { id: fileId, total: 0 }); // 初始化
fetch(url)
.then(res => {
const contentLength = Number(res.headers.get('content-length')) || 0;
commit('updateTotal', { id: fileId, total: contentLength });
const reader = res.body.getReader();
let loaded = 0;
const read = () => reader.read().then(({ done, value }) => {
if (done) return;
loaded += value.length;
commit('updateLoaded', { id: fileId, loaded });
read();
});
read();
});
}
}
模块化隔离，避免大屏全局响应风暴
大屏通常由数十个图表/卡片组成，若所有组件都监听同一个 progressList，一个进度更新可能触发全部重绘。应使用 Vuex 模块 + 精确 getter 来降低影响范围。
- 将进度管理单独拆为
modules/download.js，启用namespaced: true - 在组件中只 map 对应
id的进度项，例如：mapGetters(['progressById'])，getter 内部用state.progressList.find(i => i.id === id) - 避免在模板中直接遍历整个
progressList，尤其当列表较长时
配合大屏特性做轻量持久与容错
大屏常需长时间运行，页面刷新后进度不能丢失——但这不等于把进度存进 localStorage（流已中断，再读无意义）。重点是**恢复可感知的上下文**：
- 对正在加载的文件，可在 action 启动前写入 localStorage 标记（如
{ fileId: 'xxx', timestamp: Date.now() }），页面重载后检查是否超时，决定是否重试或清空 - 利用 Vuex 插件监听 mutation，在
updateLoaded时同步更新 DOM 元素上的data-progress属性，供外部监控脚本或无障碍工具读取 - 设置合理超时机制：在 action 中启动定时器，若 30 秒无新 chunk 到达，自动 commit error 并终止 reader
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
