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中的文档后，我们发现这在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;

所以我尝试了这两种方法。

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的文档，关于您尝试过的操作，它希望将整个对象/数组而不是长度作为第一个参数。

所以正确的方式是：

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

其中0是要更新（替换）的元素的索引

Answer 2

这对我有用。

   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)

变异时Vuex不反应

2 个答案: