【发布时间】：2019-04-23 16:13:12
【问题描述】：
我的状态中有一个名为 tour_plan 的数组。
我在 vuex actions.js 中有两个动作
- 选择位置
- select_tour
在 select_location 中，我承诺像这样更改 set_location
commit("set_location",{day,location_id,location_name,location_payment})
那么我的突变是
set_location(state, payload) {
try {
state.tour_plan.push(payload);
} catch (error) {
}
},
我所做的只是将有效负载推送到 tour_plan 数组。
在我的第二个动作的突变中，我没有向数组推送任何内容。但是我将新元素添加到我已经推送的同一个数组中。
set_tour(state, payload) {
try {
state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour;
state.tour_plan[state.tour_plan.length - 1].tour_payment = payload.tour_payment;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;
state.stage = 3;
} catch (error) {
}
}
然后我有一个叫做 cost 的吸气剂
cost: (state) => {
try {
let arr = [];
state.tour_plan.forEach(element => {
console.log("THIS GETTER RUNS");
if (element.location_name) {
let temp = {};
temp.day = element.day;
temp.item = 'Location fee';
temp.fee = element.location_payment
arr.push(temp);
}
if (element.tour_name) {
let temp = {};
temp.day = element.day;
temp.item = "Tour fee";
temp.fee = element.tour_payment;
arr.push(temp);
}
})
return arr;
} catch (error) {
console.log("ERR", error)
}
}
但这里的问题是，当我将一个对象推送到tour_plan 数组时，这个 getter 第一次运行。但是当我运行时它不会运行
将添加元素更改为数组中已存在的对象？
我的状态中有一个名为 tour_plan 的数组。
我在 vuex actions.js 中有两个动作
- 选择位置
- select_tour
在 select_location 我承诺像这样的突变 set_location commit("set_location",{day,location_id,location_name,location_payment})
那么我的突变是
set_location(state, payload) {
try {
state.tour_plan.push(payload);
} catch (error) {
}
},
我所做的只是将有效负载推送到tour_plan 数组。
在我的第二个动作的突变中，我没有向数组推送任何内容。但是我将新元素添加到我已经推送的同一个数组中。
set_tour(state, payload) {
try {
state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour;
state.tour_plan[state.tour_plan.length - 1].tour_payment = payload.tour_payment;
state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;
state.stage = 3;
} catch (error) {
}
}
然后我有一个叫做 cost 的吸气剂
cost: (state) => {
try {
let arr = [];
state.tour_plan.forEach(element => {
console.log("THIS GETTER RUNS");
if (element.location_name) {
let temp = {};
temp.day = element.day;
temp.item = 'Location fee';
temp.fee = element.location_payment
arr.push(temp);
}
if (element.tour_name) {
let temp = {};
temp.day = element.day;
temp.item = "Tour fee";
temp.fee = element.tour_payment;
arr.push(temp);
}
})
return arr;
} catch (error) {
console.log("ERR", error)
}
}
但是这里的问题是当我将一个对象推送到 tour_plan 数组时，这个 getter 首次运行。但是当我运行时它不会运行
将添加元素更改为数组中已存在的对象？
【问题讨论】：
-
你在 devtools 中检查了吗？看起来页面在从 getter 获取数据之前正在加载（意味着它从状态获取旧数据）。如果这是问题，那么您应该使用
routeBeforeEnter并在此处获取所需的数据 -
可能是反应性限制问题。检查vuejs.org/2016/02/06/common-gotchas、vuejs.org/v2/guide/list.html#Array-Change-Detection和vuex.vuejs.org/guide/…并尝试使用
Vue.set(...) -
@TommyF 我尝试使用
state.tour_plan[state.tour_plan.length - 1] = { ...state.tour_plan[state.tour_plan.length - 1], tour_id: payload.tour }; -
但它也不会触发getter
-
@TommyF 是的，这是一个反应性限制问题。 =) 我更新了我的答案。