Vue/Vuex:如何正确地进行突变以添加嵌套在对象中的属性

Question

当页面加载时，我有一个从后端API设置products状态的突变。以下是当突变运行并填充products时数据的结构。

state: 
products: {
title: "Television",
desc: "Here is a tv",
order_products: [
{
inventory_id: 44,
color: "red"
},
{
inventory_id: 45,
color: "blue"
},
{
inventory_id: 46,
color: green,
}
]
}

我需要定期通过inventory_id找到一个嵌套产品，并在每个库存项目的嵌套color字段下添加一个属性scanned(例如scanned: true(。我正在阅读使用Vuex将属性添加到Object的正确方法，例如以下方法：state.obj = { ...state.obj, newProp: 123 } (https://vuex.vuejs.org/guide/mutations.html) ，但我不知道这将如何工作，因为我正在添加嵌套属性，而不仅仅是添加到Object根的属性。

Answer 1

添加反应属性有多种方法。

这里有一种方法，使用Vue.set

const id = '...'
const product = products.order_products.find(p => p.inventory_id === id)
Vue.set(product, 'scanned', true)