Vuex не реагирует, когда мутирует

Question

У меня есть массив tour_plan в моем state, который содержит объект (ы).

tour_plan = [
    {
        day:1,
        location_id:3,
        location_name:'Colombo'
    }
]

Я хочу сделать этот объект

tour_plan = [
    {
        day:1,
        location_id:3,
        location_name:'Colombo',
        tour_id:3,
        tour_name:'City tour'
    }
]

После того какДокументы в Vuex в Figureout, что это не будет работать реактивно в мутациях Vuex.

state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour_id;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;

Так что я попробовал эти 2 способа.

state.tour_plan[state.tour_plan.length - 1] = { ...state.tour_plan[state.tour_plan.length - 1],
                tour_id: payload.tour
             };

Vue.$set(state.tour_plan[state.tour_plan.length - 1], 'tour_id', payload.tour);

Но ни один из них также не 'т работа.Где проблема в моем коде?

Answer 1

Это сработало для меня.

   Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_id', payload.tour)
   Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_payment', payload.tour_payment)
   Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_name', payload.tour_name)

Answer 2

Вы правы в том, что вы не можете изменить объект / массив при доступе к индексу, не "нарушив" систему реактивности.

О том, что вы пробовали, согласно документации Vue.set , он ожидает в качестве первого аргумента весь объект / массив, а не длину.

Таким образом, правильный способ:

Vue.$set(state.tour_plan, 0, payload.tour);

, где 0 - индексэлемент, который вы хотите обновить (заменить)