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 的对象添加属性的正确方法，例如这种方法：state.obj = { ...state.obj, newProp: 123 } (https://vuex.vuejs.org/guide/mutations.html) 但我不知道这将如何工作，因为我正在添加一个嵌套属性，而不仅仅是一个属性到对象的根。

Answer 1

有多种方法可以添加响应式属性。

这是一种方法，Vue.set

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