Javascript 是否有适当的方法重置组件'；vuejs中的初始数据？

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

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

获得了数据函数的范围

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

我是不是想得太多了，还有更好/更简单的方法

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

将初始数据提取到组件外部的函数中

使用该功能设置组件中的初始数据

需要时，重新使用该功能重置状态

//组件外部：
函数初始状态（）{
返回{
modalBodyDisplay:'getUserInput'，
submitButtonText:“查找”，
AddressToConfig:null，
BestViewedBythesBounds:空，
地点：{
名称：空，
地址：空，
位置：空
}
}
}
//组件内部：
数据：函数（）{
返回initialState（）；
} 
方法：{
重置窗口：函数（）{
赋值（this.$data，initialState（））；
}
}

要在当前组件实例中重置组件

数据

，可以尝试以下操作：

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

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

当然，您可以微调您的模式实现——上述操作也可以在一些

cancel

hook中执行

请记住，不建议对child中的

$parent

选项进行变异，但是我认为，如果parent组件只是自定义抽象模式，而不是其他，则可能是合理的

注意，

Object.assign（this.$data，this.$options.data（））

将上下文绑定到数据（）

所以使用这个：

Object.assign（this.$data，this.$options.data.apply（this））

---

cc这个答案最初是

我必须在子组件内部将数据重置为原始状态，这对我来说是有效的：

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

<button @click="$refs.childComponent.clearAllData()">Clear All</button >
       
<child-component ref='childComponent></child-component>

---

如果您对警告感到恼火，这是另一种方法：

const initialData=（）=>（{}）
导出默认值{
数据（）{
返回initialData（）；
},
方法：{
重置数据（）{
常量数据=初始数据（）
Object.keys（data.forEach（k=>this[k]=data[k]）
}
}
}

您是使用v-show还是v-if来显示模式？我使用css的引导，所以我使用内置模式，它利用jquery进行显示和隐藏。因此，组件的窗口部分基本上一直在那里，只是隐藏了。这样做了。谢谢！我对答案做了一个小的编辑，但这只是因为vue组件需要一个为数据而不是仅为对象返回的函数。您的答案概念肯定有效且正确，编辑只是为了说明vuejs如何处理组件。您对数据属性的函数的看法是正确的，这是我的疏忽。感谢您的编辑。它现在给出了一个错误：

[Vue warn]：避免替换实例根$数据。请改用嵌套数据属性。

@SankalpSingha Vue 2.0不再允许您这样做。您可以改用

对象。分配

。以下是工作代码：针对此问题-[Vue warn]：避免替换实例根$数据。改用嵌套数据属性，尝试此操作。$data.propName=“新值”；此技术现在会发出VueJS警告；请参见注意，这不会将上下文绑定到

数据中。因此，如果您在
数据方法中使用
此
，则可以使用以下内容应用上下文：
对象.assign（This.$data，This.$options.data.apply（This））
与location.reload（）相比，这些方法的优势是什么？即插即用回答，非常有效。
<button @click="$refs.childComponent.clearAllData()">Clear All</button >
       
<child-component ref='childComponent></child-component>

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

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