将元素添加到现有对象时，Vuex getter无法识别状态更改。

Question

我的状态中有一个名为tour_plan的数组。

我在vuex actions.js中有两个动作

1. select_location
2. 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中有两个动作

1. select_location
2. 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第一次运行。但是当我 更改添加元素到数组中已经存在的对象？

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)