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

但这看起来太草率了。这意味着，如果我更改了组件的数据属性，我需要确保我记得更新重置方法的结构。这不是绝对可怕，因为它是一个小的模块化组件，但它使我的大脑的优化部分尖叫。

我认为可行的解决方案是在 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获得了数据函数的作用域。

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

我是不是想太多了而且还有更好更简单的方法？

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

114259 次浏览
小开
最佳答案
  1. 将初始数据提取到组件外部的函数中
  2. 使用该函数设置组件中的初始数据
  3. 重用该函数在需要时重置状态。

// 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());
}
}

小开

要在当前组件实例中重置组件 data，您可以尝试这样做:

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

我私下里有抽象模态组件，它利用插槽来填充对话框的各个部分。当自定义模态包装该抽象模态时，插槽中引用的数据属于 < a href = “ https://vuejs.org/guide/Component ents.html # Parent-Chain”rel = “ noReferrer”> father 组件 范围。下面是抽象模式的选项，它在每次显示定制模式时重置数据(ES2015代码) : 

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

您可以微调您的模态实现的课程-上面可能也执行了一些 cancel挂钩。

请记住，突变的 $parent选项从子不推荐，但我认为它可能是合理的，如果父组件只是定制抽象模式，没有更多。

小开

注意，Object.assign(this.$data, this.$options.data())没有 将上下文绑定到 data ()。

所以用这个:

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

这个答案原来是 给你

小开

我必须在子组件中将数据重置为原始状态，这对我来说很有效:

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

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

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

儿童部分:

  1. 在外部函数中定义数据,
  2. 通过定义的函数引用数据对象
  3. 方法调用的 clearallData ()方法 父组件
function initialState() {
return {
someDataParameters : '',
someMoreDataParameters: ''
}
}


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

如果你对这些警告感到恼火，这是一种不同的方法:

const initialData = () => ({})


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

没有必要搞乱 $data。

小开

有三种方法可以重置组件状态:

  1. 定义 key属性并更改它
  2. 定义 v-if属性并将其切换为 false，从 DOM 卸载组件，然后在 nextTick切换回 true
  3. 参考将执行复位的元件的内部方法

就我个人而言，我认为第一个选项是最明确的，因为您只能通过 Props 以声明的方式控制组件。您可以使用 destroyed钩子来检测组件何时卸载并清除您需要的任何内容。

第三种方法的唯一进展是，您可以执行部分状态重置，其中您的方法只重置状态的某些部分，但保留其他部分。

下面是一个包含所有选项以及如何使用它们的例子: Https://jsbin.com/yutejoreki/edit?html,js,output


提交答案