如何持久化MUI X Premium DataGrid工具栏状态？列序无法保存

你的代码存在几个关键问题导致列顺序无法持久化：

1. 未监听列顺序变化事件：只处理了列可见性和宽度变化，但列拖动排序的触发事件是onColumnOrderChange，需要添加该事件来保存状态。
2. 列定义语法错误：const columns={[{field: ‘second’ }, { field: ‘first’ }]}中多余的大括号，应该改为数组格式。
3. 状态恢复时机可能存在问题：需确保apiRef已完成初始化后再执行状态恢复。

以下是修正后的完整代码：

import { DataGridPremium, useGridApiRef } from '@mui/x-data-grid-premium';
import { useEffect } from 'react';

export default function PersistentGrid() {
  const apiRef = useGridApiRef();

  // 修正列定义的语法错误
  const columns = [
    { field: 'second', headerName: '第二列', width: 150 },
    { field: 'first', headerName: '第一列', width: 150 }
  ];

  // 从localStorage恢复状态
  useEffect(() => {
    const restoreGridState = async () => {
      try {
        const stateJSON = localStorage.getItem("datagrid-state");
        if (stateJSON && apiRef.current) {
          // 等待apiRef初始化完成
          await apiRef.current.waitForGridApiToBeReady();
          apiRef.current.restoreState(JSON.parse(stateJSON));
        }
      } catch (e) {
        console.error('恢复网格状态失败:', e);
      }
    };

    restoreGridState();
  }, [apiRef]);

  // 保存状态到localStorage的通用函数
  const saveGridState = () => {
    if (apiRef.current) {
      const state = apiRef.current.exportState();
      localStorage.setItem("datagrid-state", JSON.stringify(state));
    }
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium
        columns={columns}
        apiRef={apiRef}
        rows={[]} // 替换为你的实际数据行
        // 添加列顺序变化监听
        onColumnOrderChange={saveGridState}
        onColumnVisibilityModelChange={saveGridState}
        onColumnWidthChange={saveGridState}
      />
    </div>
  );
}

关键改进点说明： #

• 添加onColumnOrderChange事件：列拖动排序时触发该事件，调用通用的保存函数，确保列顺序变化被记录。
• 修正列定义语法：移除多余的大括号，使用正确的数组格式定义列。
• 等待API就绪：使用waitForGridApiToBeReady()确保apiRef完全初始化后再恢复状态，避免因API未就绪导致的恢复失败。
• 通用保存函数：将状态保存逻辑抽离为单独函数，避免重复代码。

额外注意事项： #

• 替换示例中的空rows数组为你的实际业务数据。
• 如果需要持久化更多状态（如筛选、排序），可以添加对应的事件监听（如onFilterModelChange、onSortModelChange），并在saveGridState中统一保存。

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