将dragChart模块数据进行indexeddb存储

src/store/dragChart.js

@@ -1,6 +1,7 @@
 import { SCALE } from "@/assets/js/constants/config.js";
 import { Message } from "element-ui";
 import { clearAllDataFromIndexedDB } from "@/utils/indexedDb";
+import { saveData, getData } from "@/utils/indexedDb";
 const _ = require("lodash");
 
 export default {
@@ -14,7 +15,6 @@ export default {
     originChartList: [], // 当前文件的原始数据
     fileList: [], // 文件列表
     dataBaseCheckList: [], //选中数据更新
-    // formFilterAlignData: [], //这个是所有图表数据筛选保存字段
   },
   mutations: {
     setUpdateTriggerGetData(state, value) {
@@ -54,7 +54,6 @@ export default {
       state.currentChartList?.map((chartItem, ind) => {
         if (chartItem.id === data.id) {
           state.currentChartList[ind].formFilterAlignData = data.data;
-          // state.curEdit.formFilterAlignData = data.data
         }
       });
     },
@@ -112,7 +111,6 @@ export default {
     fileListUpdate(state, item) {
       state.fileList = _.cloneDeep(item);
     },
-
     // 记录当前文件的原始数据
     recordOriginChartList(state, id) {
       const fileList = state.fileList;

src/store/index.js

@@ -7,6 +7,7 @@ import settings from "./settings.js";
 import themes from "./themes.js";
 import menuTag from "./menuTag.js";
 import dragChart from "./dragChart.js";
+import vuexIndexedDBPlugin from "@/utils/vuexIndexedDBPlugin";
 Vue.use(Vuex);
 export const store = new Vuex.Store({
   state: {
@@ -42,6 +43,14 @@ export const store = new Vuex.Store({
   plugins: [
     createPersistedState({
       storage: window.sessionStorage, // 或者 localStorage
+      paths: [
+        "breadStore",
+        "auth",
+        "settings",
+        "themes",
+        "menuTag", // 指定需要存储的模块，排除 dragChart
+      ],
     }),
+    vuexIndexedDBPlugin,
   ],
 });

src/utils/indexedDb.js

@@ -214,3 +214,39 @@ export async function storeSetData(db, storeName, key, newFileData, callback) {
 //     console.error("从IndexedDB检索数据时出错:", event.target.error);
 //   };
 // }
+// utils/indexedDb.js
+export async function openDB(dbName, version) {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(dbName, version);
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = (event) => reject(event.target.error);
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      if (!db.objectStoreNames.contains("vuexData")) {
+        db.createObjectStore("vuexData", { keyPath: "key" });
+      }
+    };
+  });
+}
+
+export async function saveData(dbName, key, value) {
+  const db = await openDB(dbName, 1);
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["vuexData"], "readwrite");
+    const store = transaction.objectStore("vuexData");
+    const request = store.put({ key, value });
+    request.onsuccess = () => resolve(true);
+    request.onerror = (event) => reject(event.target.error);
+  });
+}
+
+export async function getData(dbName, key) {
+  const db = await openDB(dbName, 1);
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["vuexData"], "readonly");
+    const store = transaction.objectStore("vuexData");
+    const request = store.get(key);
+    request.onsuccess = () => resolve(request.result?.value || null);
+    request.onerror = (event) => reject(event.target.error);
+  });
+}

src/utils/vuexIndexedDBPlugin.js

@@ -0,0 +1,45 @@
+import { saveData, getData, openDB } from "@/utils/indexedDb";
+
+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,
+        });
+        console.log("Vuex state loaded from IndexedDB");
+      }
+    });
+  });
+
+  // 订阅 Vuex mutations，每次状态变更时保存到 IndexedDB
+  store.subscribe((mutation, state) => {
+    const serializableState = filterState(state);
+    saveData(dbName, keyName, serializableState)
+      .then(() => {
+        console.log(`Mutation "${mutation.type}" saved state to IndexedDB`);
+      })
+      .catch((error) => {
+        console.error("Failed to save state to IndexedDB:", error);
+      });
+  });
+};
+
+export default vuexIndexedDBPlugin;