在VueJs 2.0中重新初始化数据的正确方法

您可以尝试以下方法：

1. 使用必填字段初始化表单数据属性。（如步骤1所示）
2. 创建另一个数据字段，该数据字段将用于克隆要重置的表单数据（如STEP 2所示）。
3. 克隆所需的表单数据（步骤3）
4. 编写您的重置方法（步骤4）
5. 在您喜欢的任何地方使用（步骤5）

export default {
  // Initialize your data
  data() {
    return {
      // Initialize the form field (STEP 1)
      formFields: {
        name: '',
        email: '',
        password: '',
        moreData: {
          field1: '',
          field2: [],
        },
      },
      // Create an object property used for cloning (STEP 2)
      formFieldsCopy: {},
    };
  },

  // When the DOM is mounted copy the
  // formField you want to a temporary field
  // You can use lodash ._clone or ES6 spread operator (STEP 3)
  mounted() {
    this.formFieldsCopy = { ...this.formFields
    };
  },
  methods: {
    // Write the function to reset the form (STEP 4)
    resetFormFields() {
      this.formFields = { ...this.formFieldsCopy
      };
    },
    submit() {
      // Do you normal Axios requests here
      // and call you reset function. (STEP 5).
      this.resetFormFields();
    },
  },
};

您可以Object.assign用来遍历所有属性并分配它们：

export default {
    data () {
        return {
            h2: 0,
            // other attributes...
        };
    },
    methods: {
        resetFields () {
            Object.assign(this.$data, this.$options.data.call(this));
        }
    }
}

这是一个演示小提琴：https : //jsfiddle.net/797yyvtz/

注意：我this.$options.data用来data再次调用原始方法来获取数据的新副本。无需单独的initialState功能。该data方法是初始状态函数。

我的解决方案：

mounted(){
    this.saveData() // you can load if you need previous data
},
methods: {
    saveData(){
        localStorage.setItem(this.$options.name,JSON.stringify(this.$data));
    },
    loadData(){
        if (localStorage.getItem(this.$options.name) !== null) {
            let data= JSON.parse(localStorage.getItem(this.$options.name));
            Object.keys(data).forEach((key)=>{this[key] = data[key];});
        }
    }
}

需要时可以再次加载或保存它们