MUI X Data Grid Pro如何持久化保存行状态并在重载时恢复

apiRef.current.exportState() 默认不导出行数据是MUI X Data Grid的刻意设计——官方默认将行数据视为外部传入的业务数据源，不属于Grid自身维护的UI状态范畴，所以默认导出的内容只有列宽、排序、筛选、分页、选中态这类UI配置，自然不会包含行数据。

方案1：受控行模式（生产环境首选，无版本限制、性能最好） #

完全不用依赖Grid内部存储行数据，直接把行数据托管到你选的持久化层（Redux、localStorage、sessionStorage、路由缓存都可以），把Grid改成受控模式即可：

• 初始化时直接从持久化层读取行数据，传给组件的rows属性
• 所有CRUD操作（新增、编辑、删除行）触发时，不要等Grid内部改状态，第一时间同步更新持久化层的行数据
• 如果需要同时保留筛选、排序、列调整这类UI状态，再搭配exportState()单独存UI配置即可，恢复时两部分数据分别传入，就能100%还原离开前的状态

最小代码示例：

// 从持久化层（示例为Redux）读取已存数据
const persistedRows = useSelector(state => state.crudGrid.rows);
const persistedGridUiState = useSelector(state => state.crudGrid.uiState);
const dispatch = useDispatch();
const apiRef = useGridApiRef();

// 行编辑提交时同步更新持久化层
const handleProcessRowUpdate = async (updatedRow) => {
  dispatch(updateGridRow(updatedRow));
  return updatedRow;
};

// 删行、新增行逻辑同理，所有行变更都直接同步到持久化层
const handleRowDelete = (rowId) => dispatch(deleteGridRow(rowId));
const handleRowAdd = (newRow) => dispatch(addGridRow({...newRow, id: crypto.randomUUID()}));

// 导航离开/组件卸载时，单独导出UI状态存到持久化层
useEffect(() => {
  return () => {
    const uiState = apiRef.current.exportState();
    dispatch(saveGridUiState(uiState));
  };
}, [apiRef, dispatch]);

return (
  <DataGrid
    apiRef={apiRef}
    rows={persistedRows}
    initialState={persistedGridUiState}
    processRowUpdate={handleProcessRowUpdate}
    // 其余CRUD事件绑定对应持久化更新逻辑
  />
);

方案2：开启行数据导出配置（快速实现，适合小数据量场景） #

如果不想改现有非受控的逻辑，直接加一行配置就能让exportState()把行数据一起导出，这个配置默认是关闭的：

<DataGrid
  // 其余原有配置
  stateExport={{
    includeRows: true,
    // 如果要把编辑中还没提交的草稿行状态也一起持久化，再加下面这行
    includeEditRows: true
  }}
/>

加完配置后再调用apiRef.current.exportState()，导出的对象里就会包含全量行数据、未提交的编辑态数据，直接把整个导出结果存到Redux或者其他存储里，恢复时全量传给initialState属性就能完整还原。

注意：数据量超过1000行时不推荐用这个方案，全量序列化/反序列化行数据会有明显的性能卡顿，大数据场景优先选方案1的受控模式。

• 免费版@mui/x-data-grid不支持includeEditRows能力，这个是Pro付费版专属功能，免费版要存未提交的编辑草稿，需要自己监听rowEditStart、rowEditChange事件单独缓存
• 往localStorage这类只支持字符串的存储里写数据前，记得先做一次深拷贝剔除不可序列化的字段，Grid导出的状态偶尔会携带api实例引用，直接序列化会报错
• 如果你自定义了行id字段（没有用默认的id作为主键），恢复状态时必须保证传入的getRowId配置和导出时完全一致，否则会出现行数据匹配错乱、编辑失效的问题

内容的提问来源于stack exchange，提问作者cebucul