Vuex：如何更新这个对象的唯一元素？答案

【问题标题】：Vuex: How can I update the only element from this object?Vuex：如何更新这个对象的唯一元素？
【发布时间】：2019-06-15 22:04:44
【问题描述】：

在其他堆栈溢出问题的帮助下，我已经走到了这一步。基本上，它返回更新单个 id 的新数组。但是我的storestate没有更新，为什么？这是我的state 对象：

allProducts:[
            {
                "product_name": '',
                "code": '',
                "id": ''

            }
        ],

这是我的mutation。

UPDATE_PRODUCT : ({allProducts},payload) =>{
            let updatedProducts = allProducts.map(product => {
                if(product.id === payload.id){
                    return Object.assign({}, product, payload);
                }
                return product;
            })
            allProducts = updatedProducts;
        }

如果我console.log(updatedProducts)，我会变得非常好result。但是我的allProducts 没有更新。

【问题讨论】：

根据此处的文档：vuex.vuejs.org/guide/mutations.html 您需要将state 作为第一个参数传递给您的突变，而不是它的子对象。所以你的突变应该是这样的：UPDATE_PRODUCT : (state,payload)
对解构对象参数（即allProducts = updatedProducts）的赋值操作不会更新它来自的对象中的值

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

你在这里替换了参考，失去了原来的参考

allProducts = updatedProducts;

你应该改变它

allProducts.length = 0;
Array.prototype.push.apply(allProducts, updatedProducts);

【讨论】：

【解决方案2】：

您缺少 state 作为变异方法中的第一个参数：

state:{
    allProducts:[
        {
            "product_name": '',
            "code": '',
            "id": ''

        }
    ]  
}

和突变：

 UPDATE_PRODUCT : (state,payload) =>{
        let updatedProducts = state.allProducts.map(product => {
            if(product.id === payload.id){
                return Object.assign({}, product, payload);
            }
            return product;
        })
        state.allProducts = updatedProducts.slice();
    }

【讨论】：

虽然您的解决方案是正确的，但解释并不完全正确。 OP 没有缺少任何东西，他们试图从state 中解构allProducts，这不会通过直接赋值来维护对state.allProducts 的引用
@Phil 感谢您的评论，请解释一下
好的....所以我不能那样解构...谢谢@Phil 和brahim ..你们也能帮忙吗？ ` Object.assign({}, product, payload);`.. 第一个参数是空的，它实际上在做什么... 将有效负载分配给空 obj 是可以理解的，但是与 product 相关的是什么？
Object.assign 的第一个参数是修改并返回的参数。使用空对象可确保您不会意外改变任何现有对象
@ReyYoung 都被合并到一个新的空对象中。我建议你阅读文档~developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…