javascript - 如何在我的 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 = {}，它会删除我的所有属性。但我确实想这样做。

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

标签： javascriptvue.jsrefactoring

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;
           }
       }