如何在组件销毁后重新打开组件时在created函数中根据value参数替换currentVal对应key的值，但又不影响currentVal的其他key的值

Question

在vue中data内有以下对象

data(){
    return:{
          currentVal:{
    "modeOptions": [
        {
            "value": "module",
            "label": "内置模型",
            "listApi": {
                "api": "/api/element/builder_data/module",
                "idKey": "module_id",
                "nameKey": "title",
                "parentKey": "parent"
            },
            "dataApi": {
                "api": "/api/vc/:slug",
                "idKey": "module_id",
                "nameKey": "title",
                "parentKey": "parent"
            },
            "termApi": {
                "api": "/api/vc/term",
                "idKey": "term_id",
                "nameKey": "name",
                "parentKey": "parent",
                "groupKey": "term_group"
            }
        },
        {
            "value": "form",
            "label": "网站表单",
            "listApi": {
                "api": "/api/element/builder_data/form",
                "idKey": "module_id",
                "nameKey": "title",
                "parentKey": "parent"
            },
            "dataApi": {
                "api": "/api/vc/form_data?query[form_id]=:form_id&query[type]=form",
                "idKey": "form_data_id",
                "nameKey": "form_data_id",
                "parentKey": ""
            }
        },
        {
            "value": "custom",
            "label": "数据模型",
            "listApi": {
                "api": "/api/element/builder_data/custom",
                "idKey": "module_id",
                "nameKey": "title",
                "parentKey": "parent"
            },
            "dataApi": {
                "api": "/api/vc/query?type=:slug",
                "idKey": "module_id",
                "nameKey": "title",
                "parentKey": "parent"
            },
            "termApi": {
                "api": "/api/vc/query?type=:slug",
                "idKey": "module_id",
                "nameKey": "title",
                "parentKey": "parent",
                "groupKey": "type"
            }
        },
        {
            "value": "data",
            "label": "数据仓库",
            "listApi": {
                "api": "/api/element/builder_data/data",
                "idKey": "module_id",
                "nameKey": "title",
                "parentKey": "parent"
            },
            "dataApi": {
                "api": "/api/vc/query?type=:slug",
                "idKey": "module_id",
                "nameKey": "title",
                "parentKey": "parent"
            },
            "termApi": {
                "api": "/api/vc/query?type=:slug",
                "idKey": "module_id",
                "nameKey": "title",
                "parentKey": "parent",
                "groupKey": "type"
            }
        }
    ],
    "modeVal": "module",
    "subOptions": [
        {
            "value": "post",
            "label": "文章",
            "mmeta": [
                {
                    "key": "title",
                    "label": "标题",
                    "public": "yes",
                    "sort": 0,
                    "sortKey": "",
                    "use": "f-text"
                },
                {
                    "key": "module_id",
                    "label": "ID",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "module_id",
                    "use": "f-number"
                },
                {
                    "key": "jump_url",
                    "label": "跳转链接",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "",
                    "slot": "",
                    "use": "f-text"
                },
                {
                    "key": "subtitle",
                    "label": "副标题",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "",
                    "slot": "",
                    "use": "f-text"
                },
                {
                    "key": "copyright",
                    "label": "版权",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "",
                    "slot": "",
                    "use": "f-select"
                },
                {
                    "key": "author",
                    "label": "作者",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "",
                    "slot": "",
                    "use": "f-text"
                },
                {
                    "key": "source",
                    "label": "来源",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "",
                    "slot": "",
                    "use": "f-text"
                },
                {
                    "key": "source_url",
                    "label": "来源网址",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "",
                    "slot": "",
                    "use": "f-text"
                },
                {
                    "key": "created",
                    "label": "发布",
                    "public": "yes",
                    "sort": 0,
                    "sortKey": "created",
                    "use": "f-date",
                    "slot": ""
                },
                {
                    "key": "modified",
                    "label": "更新",
                    "public": "yes",
                    "sort": 0,
                    "sortKey": "modified",
                    "use": "f-date",
                    "slot": ""
                }
            ]
        },
        {
            "value": "product",
            "label": "产品",
            "mmeta": [
                {
                    "key": "title",
                    "label": "标题",
                    "public": "yes",
                    "sort": 0,
                    "sortKey": "",
                    "use": "f-text"
                },
                {
                    "key": "module_id",
                    "label": "ID",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "module_id",
                    "use": "f-number"
                },
                {
                    "key": "regular_price",
                    "label": "常规售价",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "",
                    "slot": "",
                    "use": "f-text"
                },
                {
                    "key": "sale_price",
                    "label": "促销售价",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "",
                    "slot": "",
                    "use": "f-text"
                },
                {
                    "key": "sku",
                    "label": "货号",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "",
                    "slot": "",
                    "use": "f-select"
                },
                {
                    "key": "created",
                    "label": "发布",
                    "public": "yes",
                    "sort": 0,
                    "sortKey": "created",
                    "use": "f-date",
                    "slot": ""
                },
                {
                    "key": "modified",
                    "label": "更新",
                    "public": "yes",
                    "sort": 0,
                    "sortKey": "modified",
                    "use": "f-date",
                    "slot": ""
                }
            ]
        },
        {
            "value": "page",
            "label": "页面",
            "mmeta": [
                {
                    "key": "title",
                    "label": "标题",
                    "public": "yes",
                    "sort": 0,
                    "sortKey": "",
                    "use": "f-text"
                },
                {
                    "key": "module_id",
                    "label": "ID",
                    "public": "no",
                    "sort": 0,
                    "sortKey": "module_id",
                    "use": "f-number"
                },
                {
                    "key": "created",
                    "label": "发布",
                    "public": "yes",
                    "sort": 0,
                    "sortKey": "created",
                    "use": "f-date",
                    "slot": ""
                },
                {
                    "key": "modified",
                    "label": "更新",
                    "public": "yes",
                    "sort": 0,
                    "sortKey": "modified",
                    "use": "f-date",
                    "slot": ""
                }
            ]
        },
        {
            "value": "template",
            "label": "底板"
        }
    ],
    "subVal": "post",
    "requestApi": {
        "api": "/api/element/builder_data/module",
        "termUrl": "/api/vc/term?query[term_group]=term-post",
        "dataUrl": "/api/vc/post"
    },
    "termApi": {
        "api": "/api/vc/term",
        "idKey": "term_id",
        "nameKey": "name",
        "parentKey": "parent",
        "groupKey": "term_group"
    },
    "termUrl": "/api/vc/term?query[term_group]=term-post",
    "dataApi": {
        "api": "/api/vc/:slug",
        "idKey": "module_id",
        "nameKey": "title",
        "parentKey": "parent"
    },
    "dataUrl": "/api/vc/post",
    "dataVal": [],
    "terms": [],
    "termsList": [],
    "formCheckbox": [
        {
            "value": "title",
            "label": "标题"
        },
        {
            "value": "module_id",
            "label": "ID"
        },
        {
            "value": "jump_url",
            "label": "跳转链接"
        },
        {
            "value": "subtitle",
            "label": "副标题"
        },
        {
            "value": "copyright",
            "label": "版权"
        },
        {
            "value": "author",
            "label": "作者"
        },
        {
            "value": "source",
            "label": "来源"
        },
        {
            "value": "source_url",
            "label": "来源网址"
        },
        {
            "value": "created",
            "label": "发布"
        },
        {
            "value": "modified",
            "label": "更新"
        }
    ],
    "formCheckboxVal": [
        "title",
        "module_id",
        "jump_url",
        "subtitle",
        "copyright",
        "author",
        "source",
        "source_url",
        "created",
        "modified"
    ]
}
    }
}

在props中有以下value对象：

props:{
    value:{
    "modeVal": "module",
    "subVal": "post",
    "dataVal": [],
    "terms": [],
    "formCheckbox": [
        {
            "value": "title",
            "label": "标题"
        },
        {
            "value": "module_id",
            "label": "ID"
        },
        {
            "value": "jump_url",
            "label": "跳转链接"
        },
        {
            "value": "subtitle",
            "label": "副标题"
        },
        {
            "value": "copyright",
            "label": "版权"
        },
        {
            "value": "author",
            "label": "作者"
        },
        {
            "value": "source",
            "label": "来源"
        },
        {
            "value": "source_url",
            "label": "来源网址"
        },
        {
            "value": "created",
            "label": "发布"
        },
        {
            "value": "modified",
            "label": "更新"
        }
    ],
    "formCheckboxVal": [
        "title",
        "module_id",
        "jump_url",
        "subtitle",
        "copyright",
        "author",
        "source",
        "source_url",
        "created",
        "modified"
    ]
}
}

如何在组件销毁后重新打开组件时在created函数中根据value参数替换currentVal对应key的值，但又不影响currentVal的其他key的值

Answer 1

【以下回答由 GPT 生成】

首先，在Vue组件销毁后重新打开组件时，可以使用activated生命周期钩子函数来触发相应的逻辑。而为了保留currentVal对象的其他key的值不被替换，需要先对currentVal对象进行浅拷贝操作，然后再替换对应key的值。

具体的解决方案如下所示：

data(){
  return {
    currentVal: {
      // ...
    }
  }
},
activated() {
  // 在组件重新激活时进行替换操作
  this.currentVal = { ...this.currentVal, [this.value]: this.getReplacementValue(this.value) };
},
methods: {
  getReplacementValue(value) {
    // 根据传入的value参数返回相应的替换值
    if (value === 'module') {
      return {
        "value": "module",
        "label": "新的内置模型",
        // ...
      };
    }
    if (value === 'form') {
      return {
        "value": "form",
        "label": "新的网站表单",
        // ...
      };
    }
    if (value === 'custom') {
      return {
        "value": "custom",
        "label": "新的自定义值",
        // ...
      };
    }
    // 如果传入的value参数没有匹配的情况下，可以返回一个默认值或者抛出异常
    return null;
  }
}

上述代码中，首先在activated生命周期钩子函数中通过浅拷贝操作将currentVal对象的其他key的值保留下来，然后根据传入的value参数调用getReplacementValue方法来获取相应的替换值，并将其赋值给currentVal对象相应的key中。

注意：以上代码假设value参数是一个组件内部的数据属性，可以通过this.value来获取。如果value参数是通过props传递的，则可以使用this.$props.value来获取。在使用时需要根据实际情况来修改。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^