如何在我的 vuejs 代码中删除重复的重新初始化代码

Question

在使用 vuejs 制作用户注册表单时，我编写了丑陋的代码。

我想很好地重构，但缺乏想法。由于从遗留代码中添加了 vuejs，我无法使用 vue cli。所以我用<script>标签嵌入了vuejs。

我想上课的是

newUser : {
          "email": '',
          "firstName": '',
          "lastName": '',
          "additionalInfo":{
            "phone": '',
            "description":''
           },
          "authority":"TENANT_ADMIN",
          "tenantId":{
            "entityType": "TENANT",
            "id": ''
          },
          "customerId": {
            "entityType": "CUSTOMER",
            "id": ''
          }
        }

这是我的代码。
https://codepen.io/pen/?editors=1111#

要清除现有表单，我确实手动清除了它的属性。

当我尝试使用this.newUser = {} 进行重置时，它会删除我的所有属性。但我确实想要。

我怎样才能很好地重构我的代码？

Answer 1

也许

       class ... {

          default = {
             "email": '',
             "firstName": '',
             "lastName": '',
             "additionalInfo":{
               "phone": '',
               "description":''
              },
             "authority":"TENANT_ADMIN",
             "tenantId":{
               "entityType": "TENANT",
               "id": ''
             },
             "customerId": {
               "entityType": "CUSTOMER",
               "id": ''
             }
           }

           newUser = {}

           constructor() {
             this.init();
           }

           init() {
             this.newUser = this.default;
           }

           clear() {
             this.newUser = this.default;
           }
       }