Vue / Vuex: как правильно сделать мутацию для добавления свойства, вложенного в объект

Question

У меня есть мутация, которая устанавливает мое состояние products из бэкэнд-API при загрузке страницы. Ниже показано, как структурируются данные, когда мутация запускается и заполняет 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 и добавлять свойство scanned (например, scanned: true) под вложенным полем color для каждого предмета инвентаря. Я читаю о том, как правильно использовать мутацию для добавления свойства к объекту, используя Vuex, например, этот метод: state.obj = { ...state.obj, newProp: 123 } (https://vuex.vuejs.org/guide/mutations.html) , но я не знаю, как это будет работать, потому что я добавляю вложенное свойство, а не просто свойство к root Объекта.

Answer 1

Существует несколько способов добавить реактивное свойство.

Вот один из способов, с Vue.set

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