有没有一种正确的方法可以在 vuejs 中重置组件的初始数据? [英] Is there a proper way of resetting a component's initial data in vuejs?

问题描述

我有一个包含一组特定起始数据的组件:

I have a component with a specific set of starting data:

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

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

This is data for a modal window, so when it shows I want it to start with this data. If the user cancels from the window I want to reset all of the data to this.

我知道我可以创建一种方法来重置数据，然后手动将所有数据属性设置回原来的状态:

I know I can create a method to reset the data and just manually set all of the data properties back to their original:

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

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

But this seems really sloppy. It means that if I ever make a change to the component's data properties I'll need to make sure I remember to update the reset method's structure. That's not absolutely horrible since it's a small modular component, but it makes the optimization portion of my brain scream.

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

The solution that I thought would work would be to grab the initial data properties in a ready method and then use that saved data to reset the components:

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 正在获取数据函数的范围.

But the initialDataConfiguration object is changing along with the data (which makes sense because in the read method our initialDataConfiguration is getting the scope of the data function.

有没有办法在不继承范围的情况下抓取初始配置数据?

Is there a way of grabbing the initial configuration data without inheriting the scope?

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

Am I overthinking this and there's a better/easier way of doing this?

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

Is hardcoding the initial data the only option?

推荐答案

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

这篇关于有没有一种正确的方法可以在 vuejs 中重置组件的初始数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！