Vuex добавляет новое свойство массива к объекту и добавляет элементы к этому объекту внутри мутации реактивным способом

Question

Согласно Официальным документам , мутации * vuex имеют некоторые ограничения в реактивности.

Когда добавляя новое свойство к объекту , мынужно сделать,

Vue.set(obj, 'newProp', 123)

Это нормально.Но как добавить к этому новые свойства array и push , не нарушая реактивность?

Это то, что я делал до сих пор.Это работает нормально, но проблема в том, что это не реагирует.Getters не может распознать изменения, произошедшие с состоянием.

set_add_ons(state, payload) {
        try {

            if (!state.tour_plan[state.tour_plan.length - 1].add_ons) {
                state.tour_plan[state.tour_plan.length - 1].add_ons = [];
            }
            state.tour_plan[state.tour_plan.length - 1].add_ons.push(payload);


        } catch (error) {
            console.log("ERR", error)
        }
    },

Как преобразовать это в код, который реагирует?

Answer 1

Вы можете использовать Vue.set, чтобы создать атрибут add_ons, чтобы сделать его реактивным;Это должно работать и для массива:

Vue.set(state.tour_plan[state.tour_plan.length - 1], 'add_ons', []);

Демо :

new Vue({
  el: '#app',
  data: {
    items: [{ id: 0 }]
  },
   methods: {
    addArray () {
      if (!this.items[this.items.length-1].add_on)
        this.$set(this.items[this.items.length - 1], 'add_on', [])
      this.items[this.items.length - 1].add_on.push(1)
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <button v-on:click="addArray">
    Add 1 to add_on create if not exists
  </button>
  <div v-for="item in items">add_on content: {{ item.add_on }}</div>
</div>