performance-test/src/utils/vuexIndexedDBPlugin.js

// import { saveData, getData } from "@/utils/indexedDb";
// import { stringify, parse } from "flatted"; // 用于处理循环引用 压缩数据处理
// import pako from "pako";
// import { Message } from "element-ui";

// // 通用分片函数
// const splitIntoChunks = (data, chunkSize) => {
//   const chunks = [];
//   for (let i = 0; i < data.length; i += chunkSize) {
//     chunks.push(data.slice(i, i + chunkSize));
//   }
//   return chunks;
// };

// // 修改后的 openDB 方法
// const openDB = (dbName, version) => {
//   return new Promise((resolve, reject) => {
//     const request = indexedDB.open(dbName, version);

//     request.onsuccess = () => {
//       resolve(request.result);
//     };

//     request.onerror = (error) => {
//       reject(error);
//     };

//     request.onupgradeneeded = (event) => {
//       const db = event.target.result;

//       // 创建对象存储（如果不存在）
//       if (!db.objectStoreNames.contains("dragChart_chunk_meta")) {
//         db.createObjectStore("dragChart_chunk_meta");
//       }
//       if (!db.objectStoreNames.contains("dragChart_compressed")) {
//         db.createObjectStore("dragChart_compressed");
//       }
//       if (!db.objectStoreNames.contains("myIndexedDB")) {
//         db.createObjectStore("myIndexedDB");
//       }
//     };
//   });
// };

// // vuex 插件
// const vuexIndexedDBPlugin = (store) => {
//   const dbName = "vuexDB";
//   const keyName = "vuexState";

//   // 过滤 Vuex 状态，去掉不可序列化的部分
//   const filterState = (state) => {
//     const clonedState = JSON.parse(
//       JSON.stringify(state, (key, value) => {
//         // 如果是函数或无法克隆的对象，返回 undefined
//         if (typeof value === "function") return undefined;
//         return value;
//       })
//     );
//     return clonedState;
//   };
//   // 初始化 IndexedDB 并加载状态
//   openDB(dbName, 1).then(() => {
//     getData(dbName, keyName).then((savedState) => {
//       if (savedState) {
//         store.replaceState({
//           ...store.state,
//           ...savedState,
//         });
//       }
//     });
//   });

//   // 订阅 Vuex mutations，每次状态变更时保存到 IndexedDB
//   store.subscribe((mutation, state) => {
//     if (mutation.type.startsWith("dragChart/")) {
//       const dragChartState = state.dragChart;

//       try {
//         const cleanedState = JSON.parse(
//           JSON.stringify(dragChartState, (key, value) => {
//             if (
//               typeof value === "function" ||
//               value instanceof HTMLElement ||
//               value === undefined
//             ) {
//               return undefined;
//             }
//             return value;
//           })
//         );

//         // 压缩或分片存储
//         const chunkSize = 500;
//         if (
//           cleanedState.currentChartList &&
//           Array.isArray(cleanedState.currentChartList)
//         ) {
//           const chunks = splitIntoChunks(
//             cleanedState.currentChartList,
//             chunkSize
//           );
//           chunks.forEach((chunk, index) => {
//             const chunkKey = `dragChart_chunk_${index}`;
//             saveData("myIndexedDB", chunkKey, chunk)
//               .then(() => {
//                 console.log(`Chunk ${index} saved successfully`);
//               })
//               .catch((error) =>
//                 console.error(`Failed to save chunk ${index}:`, error)
//               );
//           });

//           saveData("myIndexedDB", "dragChart_chunk_meta", {
//             totalChunks: chunks.length,
//           });
//         }

//         // 存储压缩的元数据
//         const compressedData = pako.deflate(stringify(cleanedState), {
//           to: "string",
//         });
//         saveData("myIndexedDB", "dragChart_compressed", compressedData)
//           .then(() => {
//             //console.log("Compressed metadata saved")
//           })
//           .catch((error) =>
//             console.error("Failed to save compressed metadata:", error)
//           );
//       } catch (error) {
//         console.error("Error processing dragChart state:", error);
//         Message({
//           message: "数据存储已满，请刷新页面进行数据清除" + error,
//           type: "error",
//         });
//       }
//     }
//   });
// };

// export default vuexIndexedDBPlugin;
import { saveData, getData } from "@/utils/indexedDb";
import { Message } from "element-ui";

// 通用的过滤 Vuex 状态，去掉不可序列化的部分
const filterState = (state) => {
  const clonedState = JSON.parse(
    JSON.stringify(state, (key, value) => {
      // 如果是函数或无法克隆的对象，返回 undefined
      if (
        typeof value === "function" ||
        value instanceof HTMLElement ||
        value === undefined
      ) {
        return undefined;
      }
      return value;
    })
  );
  return clonedState;
};

// // 修改后的 openDB 方法
// const openDB = (dbName, version) => {
//   return new Promise((resolve, reject) => {
//     const request = indexedDB.open(dbName, version);

//     request.onsuccess = () => {
//       resolve(request.result);
//     };

//     request.onerror = (error) => {
//       reject(error);
//     };

//     request.onupgradeneeded = (event) => {
//       const db = event.target.result;

//       // 创建对象存储（如果不存在）
//       if (!db.objectStoreNames.contains("myIndexedDB")) {
//         db.createObjectStore("myIndexedDB");
//       }
//     };
//   });
// };
const openDB = (dbName, version) => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(dbName, version);
    request.onsuccess = () => {
      resolve(request.result);
    };
    request.onerror = (error) => {
      reject(error);
    };
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      // 创建对象存储，确保名称为 vuexData（与getData中的名称一致）
      if (!db.objectStoreNames.contains("vuexData")) {
        db.createObjectStore("vuexData");
      }
    };
  });
};
// vuex 插件
const vuexIndexedDBPlugin = (store) => {
  const dbName = "vuexDB";
  const keyName = "vuexState";
  // 初始化 IndexedDB 并加载状态
  openDB(dbName, 1).then(() => {
    getData(dbName, keyName).then((savedState) => {
      if (savedState) {
        store.replaceState({
          ...store.state,
          ...savedState,
        });
      }
    });
  });
  // 订阅 Vuex mutations，每次状态变更时保存到 IndexedDB
  store.subscribe((mutation, state) => {
    if (mutation.type.startsWith("dragChart/")) {
      const dragChartState = state.dragChart;
      try {
        // 过滤不需要保存的内容
        const cleanedState = filterState(dragChartState);
        // 直接保存整个状态到 IndexedDB
        saveData("vuexData", keyName, cleanedState)
          .then(() => {
            console.log("State saved successfully");
          })
          .catch((error) => {
            console.error("Failed to save state:", error);
            Message({
              message: "数据存储失败：" + error,
              type: "error",
            });
          });
      } catch (error) {
        console.error("Error processing dragChart state:", error);
        Message({
          message: "数据存储失败，请刷新页面进行数据清除：" + error,
          type: "error",
        });
      }
    }
  });
};
export default vuexIndexedDBPlugin;