Replace JSON.parse(JSON.stringify()) with lodash-es cloneDeep for deep cloning Vue reactive data (S7784)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 08:23:44 +08:00
parent 2374363484
commit e9e588385b
11 changed files with 76 additions and 56 deletions
@@ -125,6 +125,7 @@ import { ref, computed, watch, nextTick, useTemplateRef, onBeforeUnmount } from
 import { storeToRefs } from "pinia";
 import { useConformanceStore } from "@/stores/conformance";
 import cytoscapeMapTrace from "@/module/cytoscapeMapTrace.js";
+import { cloneDeep } from "lodash-es";

 const props = defineProps([
  "listModal",
@@ -183,7 +184,7 @@ const traceList = computed(() => {

 const caseData = computed(() => {
  if (infiniteData.value !== null) {
-    const data = JSON.parse(JSON.stringify(infiniteData.value)); // Deep copy the original cases data
+    const data = cloneDeep(infiniteData.value);
    data.forEach((item) => {
      item.facets.forEach((facet, index) => {
        item[`fac_${index}`] = facet.value; // Create a new key-value pair
@@ -201,7 +202,7 @@ const caseData = computed(() => {
 });

 const columnData = computed(() => {
-  const data = JSON.parse(JSON.stringify(props.cases)); // Deep copy the original cases data
+  const data = cloneDeep(props.cases);
  if (!data || data.length === 0) return [];
  const facetName = (facName) =>
    facName