将数据重置为原始值

Question

在我的应用程序中，我的数据中有很多属性，当我点击一个按钮时我需要将数据重置为原始值，因为我在应用程序中操作它们，是否有正确的方法来转动数据值变成了原始的？

data: {
        showStart: true,
        isYouAttack: true,
        valueMonster: 100,
        valueYou: 100,
        monsterProgress: 500,
        youProgress: 500,
        alerts: [],
        progressMonster: {
            'width': '500px',
            'backgroundColor': 'green',
            'height': '50px'
        },
        progressYou: {
            'width': '500px',
            'background-color': 'green',
            'height': '50px'
        }
    },

这是我在应用程序中更改的数据，当我单击按钮我想再次获取此数据时，是否有使用vue.js的简单方法？

Answer 1

如果需要，可以通过vue data api通过{{3}}传递vm。$ data来获得原始对象的深度克隆。像这样的代码。你可以定义一个重置方法创建了callbacks.and然后调用reset方法，这将触发已更改的属性。

可重新组合的组件

JSON.parse(JSON.stringify(...))

测试

let user = new Vue({
    data: function () {
        return {
            name: 'John',
            address: {
                country: 'China',
                city: 'guangzhou'
            }
        };
    },
    created(){
        let json = JSON.stringify(this.$data);
        this.reset = () => {
            Object.assign(this.$data, JSON.parse(json));
        };
    }
});