vuex中使用push给数组增加数据,会增加两条相同的数据

只是执行了一次push,为何会向数组里push两条相同的数据呢。
百思不得其解。


(this.state.updateTripInfoObj.people.data).push(obj); // 这里
this.state.travellerInfo.after.temporary.people.data.push(obj);

commit('setTripInfoObj', {
    type: 'people',
    res: this.state.updateTripInfoObj.people.data,
});
commit('setTravellerInfo', this.state.travellerInfo);

setTripInfoObj 只会做赋值操作

setTripInfoObj(state, payload) {
    if (payload.type === 'people') {
        state.updateTripInfoObj.people.data = payload.res;
    } else {
        const { address, people, stroke, take } = payload;
        state.updateTripInfoObj = {
            people: people || [],
            stroke: stroke || {},
            address: address || [],
            take: take || {},
        };
    }
},

回答:

vuex 万分强调:

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

不要直接在 state 上修改状态,你先是手动修改,后又通过 mutation 修改,可不是增加了两次吗。

回答:

可以借鉴一下这个简单的例子https://vuex.vuejs.org/zh/guide/

回答:

之前一直怀疑是数据push导致的。
提供两条思路:

1.对象赋值是引用类型,一个改变了会影响另一个(可能是代码哪个地方赋值影响了)。解决方法是:使用深拷贝替换等号赋值
2.commit处理数据的时候不要多次提交。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注