Как правильно обновить вложенный объект?

Question

[andrei_pro]

В vuex есть объект:

store: {
      product: {
          name: 'Product',
          options: {
              isFree: false,
              delivery: true
          }
      }
   }

Есть мутация для обновления:

updateProduct(state, {product, data}) {
    Object.assign(product, data)
}

Затем обновляю одну опцию:

const product = this.product

this.$store.commit('updateProduct', {
   product,
   data: {
      options: {
         isFree: true,
      }
   }
}

Проблема: остальные опции удаляются из объекта.

Answer 1

[0xD34F]

Передавайте в мутацию не весь объект, а только ту его часть, которую собираетесь обновить:

this.$store.commit('updateProduct', {
  product: product.options,
  data: {
    isFree: true,
  },
});

В противном случае, необходимо выполнять рекурсивное слияние свойств объектов. Если не готовы реализовывать подобное самостоятельно, воспользуйтесь каким-нибудь уже существующим решением, например.

Answer 2

[alex_kulkoff]

А разве нельзя написать мутацию для смены опции и вызывать ее когда нужно?