在VueJs 2.0中重新初始化數據的正確方法

Question

我在SO上回答這個問題： 是否有正確的方法在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!
            }
        }
    }

那么重新初始化數據的正確和最簡單的方法是什么？

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方法以獲取data的新副本。 不需要單獨的initialState函數。 data方法是初始狀態函數。

Answer 2

您是否嘗試迭代initialState對象並再次設置它？ 以下是示例代碼：

function initialState() {
    return {
        h2: 0,
        ch4: 0,
        // and so on... finally
        selected: ''
    }
}

export default {
    name: 'something',
    data: function() {
        return initialState()
    },
    computed: {
        // ...
    },
    methods: {
        resetFields: function() {
            // Fetch the initialState object locally, so we do not have to call the function again
            let initialData = initialState();
            // Iterate through the props
            for (let prop in initialData) {
                // Reset the prop locally.
                this[prop] = initialData[prop];
            }
        }
    }
}

在我本地有限的實驗中，它似乎確實有效。 讓我知道你對這種方法的看法。

Answer 3

使用名為“data”或其他內容的鍵將所有數據包裝到dict中。 然后你可以通過設置this.data = {xx：yy}重新初始化整個數據，或直接更改一個數據項，如this.data.h2 = 2。

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 {data: initialState()} // This is working fine 
    },
    computed: {
        tdcg: function () {
            // some logic here...
        }
    },
    methods: {
        resetFields: function () {
            this.data = initialState() // --> This is what I want to achieve!
        }
    }
}

Answer 4

你可以試試這個：

1. 使用必填字段初始化表單數據屬性。 （如步驟1中所示）
2. 創建另一個數據字段，用於克隆要重置的表單數據（如步驟2中所示）。
3. 克隆所需的表單數據（步驟3）
4. 寫你重置方法（步驟4）
5. 使用您喜歡的任何地方（步驟5）

 export default { // Initialize your data data() { return { // Initialize the form field (STEP 1) formFields: { name: '', email: '', password: '', moreData: { field1: '', field2: [], }, }, // Create an object property used for cloning (STEP 2) formFieldsCopy: {}, }; }, // When the DOM is mounted copy the // formField you want to a temporary field // You can use lodash ._clone or ES6 spread operator (STEP 3) mounted() { this.formFieldsCopy = { ...this.formFields }; }, methods: { // Write the function to reset the form (STEP 4) resetFormFields() { this.formFields = { ...this.formFieldsCopy }; }, submit() { // Do you normal Axios requests here // and call you reset function. (STEP 5). this.resetFormFields(); }, }, }; 

Answer 5

我的解決方案

mounted(){
    this.saveData() // you can load if you need previous data
},
methods: {
    saveData(){
        localStorage.setItem(this.$options.name,JSON.stringify(this.$data));
    },
    loadData(){
        if (localStorage.getItem(this.$options.name) !== null) {
            let data= JSON.parse(localStorage.getItem(this.$options.name));
            Object.keys(data).forEach((key)=>{this[key] = data[key];});
        }
    }
}

如果需要，您可以再次加載或保存它們