在 VueJs 2.0 中重新初始化数据的正确方法

Question

我正在通过 SO 回答这个问题： Is there a proper way to resetting a component’s initial data in vuejs?

但是，现在不允许使用当前方法，VueJS 禁止更改 $data var。

正如您在此 https://github.com/vuejs/vue/issues/2873 中看到的那样（不允许修改 $data。）

因此，如果我尝试上述方法，则会收到 VueJS 警告：

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

这是我的 JS 代码，

 function initialState () {
        return {
            h2: 0,
            ch4: 0,
            c2h6: 0,
            c2h4: 0,
            c2h2: 0,
            c3h8: 0,
            c3h6: 0,
            co: 0,
            co2: 0,
            o2: 0,
            n2: 0,
            selected: ''
        }
    }
    export default {
        name: 'something',
        data () {
            return initialState() // This is working fine
        },
        computed: {
            tdcg: function () {
                // some logic here...
            }
        },
        methods: {
            resetFields: function () {
                this.$data = initialState() // --> This is what I want to achieve!
            }
        }
    }

那么重新初始化数据的正确和最简单的方法是什么？

原文由 Sankalp Singha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 Object.assign 遍历所有属性并分配它们：

 export default {
    data () {
        return {
            h2: 0,
            // other attributes...
        };
    },
    methods: {
        resetFields () {
            Object.assign(this.$data, this.$options.data.call(this));
        }
    }
}

这是一个演示小提琴： https ://jsfiddle.net/797yyvtz/

---

注意： 我正在使用 this.$options.data 再次调用原始 data 方法来获取数据的新副本。不需要单独的 initialState 函数。 data 方法 是 初始状态函数。

原文由 Joseph Silber 发布，翻译遵循 CC BY-SA 3.0 许可协议