问在Vuejs3中深度克隆导入的属性

EN

我已经执行了如下所示的命令，它存储在单独的文件中，然后作为导入从"path“导入到vue组件中。

const myTemplate = 
{
    a:{
        key11: undefined,
        key12: undefined
    },
    b:{
        key21: undefined,
        key22: undefined
    }
    
}

在组件内部，我使用这个myTemplate对象来创建新的数据属性

<script>
    data(){
        getfields: myTemplate
    }
</script>

在脚本中，我遍历myTemplate并使用来自父组件的支柱分配它，父组件保存key11, key12 ,key21 ,...的值，依此类推。

myTemplate的目的是作为基本/标准格式，从输入的支柱中收集数据。

稍后，getfields由v-for在<template>标记中循环以显示内容。

我将道具{key11: somevalue1, key12: somevalue2}发送给我的子组件，与myTemplate对象中的键匹配，使用此子组件中的方法更新getfields中的相同键

最终结果：

{
    a:{
        key11: somevalue1,
        key12: somevalue2
    },
    b:{
        key21: undefined,
        key22: undefined
    }   
}

问题：

在对象的情况下，JS复制引用并修改我的myTemplate对象。

我想让我的myTemplate完好无损，如果getfields被改变了，我不能以任何方式改变它。

我尝试过的：

1. 深克隆人const getfields : JSON.parse(JSON.stringify(myTemplate))

1. 尝试了动态导入，希望能有所帮助，但它很有力量。

让self=导入(“路径”).then((数据) =>{ self.getfields = data.default })