vue.js - 通过直接用对象替换它的值来改变对象状态

Question

我有一个使用 vue 和 vuex 的 Laravel 项目。虽然一切正常，但我发现在突变中我必须遍历数组然后将其推送到状态。直接用新数组替换状态似乎不起作用。

所以，在我的突变中，这不起作用：

mutations: {
    setProducts(state, products) {
        state.products = products
    }
}

但是，这个可以：

mutations: {
    setProducts(state, products) {
        products.forEach(product => {
            state.products.push(product)
        }
    }
}

这不是一个真正的问题，因为它有效，但我只是想知道为什么第一个似乎更有效时不起作用。

标签： vue.jsvuex

Answer 1

Vue 包装了观察到的数组的变异方法，因此它们也会触发视图更新。包装的方法是：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

来源：https ://vuejs.org/v2/guide/list.html#Mutation-Methods