在vuejs中是否有适当的方法来重置组件的初始数据？

Question 1

我有一个带有一组特定的起始数据的组件：

data: function (){
    return {
        modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue'
        submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes'
        addressToConfirm: null,
        bestViewedByTheseBounds: null,
        location:{
            name: null,
            address: null,
            position: null
        }
}

这是模态窗口的数据，因此当它显示我希望它以该数据开始时。如果用户从窗口取消，我想将所有数据重置为此。

我知道我可以创建一种方法来重置数据，只需手动将所有数据属性设置回其原始状态即可：

reset: function (){
    this.modalBodyDisplay = 'getUserInput';
    this.submitButtonText = 'Lookup';
    this.addressToConfirm = null;
    this.bestViewedByTheseBounds = null;
    this.location = {
        name: null,
        address: null,
        position: null
    };
}

但这似乎很草率。这意味着，如果我曾经更改过组件的数据属性，则需要确保我记得更新了reset方法的结构。因为它是一个小的模块化组件，所以这并不是绝对可怕的，但是它使我的大脑感到最优化。

我认为可行的解决方案是获取方法中的初始数据属性ready，然后使用保存的数据重置组件：

data: function (){
    return {
        modalBodyDisplay: 'getUserInput', 
        submitButtonText: 'Lookup', 
        addressToConfirm: null,
        bestViewedByTheseBounds: null,
        location:{
            name: null,
            address: null,
            position: null
        },
        // new property for holding the initial component configuration
        initialDataConfiguration: null
    }
},
ready: function (){
    // grabbing this here so that we can reset the data when we close the window.
    this.initialDataConfiguration = this.$data;
},
methods:{
    resetWindow: function (){
        // set the data for the component back to the original configuration
        this.$data = this.initialDataConfiguration;
    }
}

但是initialDataConfiguration对象随数据一起变化（这很有意义，因为在read方法中，我们initialDataConfiguration正在获取数据功能的范围。

有没有一种方法可以在不继承范围的情况下获取初始配置数据？

我是否在考虑这个问题，并且有一种更好/更简便的方法？

硬编码初始数据是唯一的选择吗？

Question 2

将初始数据提取到组件外部的函数中
使用该功能设置组件中的初始数据
在需要时重新使用该功能以重置状态。

// outside of the component:
function initialState (){
  return {
    modalBodyDisplay: 'getUserInput', 
    submitButtonText: 'Lookup', 
    addressToConfirm: null,
    bestViewedByTheseBounds: null,
    location:{
      name: null,
      address: null,
      position: null
    }
  }
}

//inside of the component:
data: function (){
    return initialState();
} 


methods:{
    resetWindow: function (){
        Object.assign(this.$data, initialState());
    }
}

展开摘要

Question 3

要重置data当前组件实例中的组件，您可以尝试以下操作：

Object.assign(this.$data, this.$options.data())

我私下有一个抽象的模式组件，该组件利用插槽填充对话框的各个部分。当定制模式包装抽象模式时，插槽中引用的数据属于父组件范围。这是抽象模态的选项，它每次显示自定义模态时都会重置数据（ES2015代码）：

watch: {
    show (value) { // this is prop's watch
      if(value) {
        Object.assign(this.$parent.$data, this.$parent.$options.data())
      }
    }
}

您当然可以微调您的模态实现-上面的代码也可能在某些cancel钩子中执行。

请记住，$parent不建议从子选项中选择选项，但是如果父组件只是自定义抽象模态，仅此而已，我认为这是有道理的。

Question 4

注意，Object.assign(this.$data, this.$options.data())不要将上下文绑定到data（）中。

所以使用这个：

Object.assign(this.$data, this.$options.data.apply(this))

抄送这个答案原来是在这里

Question 5

如果您对警告感到恼火，则可以使用另一种方法：

const initialData = () => ({})

export default {
  data() {
    return initialData();
  },
  methods: {
    resetData(){
      const data = initialData()
      Object.keys(data).forEach(k => this[k] = data[k])
    }
  }
}

展开摘要

无需弄乱$ data。

Question 6

我不得不将数据重置为子组件内部的原始状态，这对我有用：

父组件，调用子组件的方法：

     <button @click="$refs.childComponent.clearAllData()">Clear All</button >

     <child-component ref='childComponent></child-component>

子组件：

在外部函数中定义数据，
将数据对象分配给外部函数

定义由父组件调用的clearallData（）方法

function initialState() {
   return { 
     someDataParameters : '',
     someMoreDataParameters: ''
          }
  }

export default {
   data() {
    return initialState();
  },
    methods: {
  clearAllData() {
  Object.assign(this.$data, initialState());
},