javascript - 拼接不是从给定的索引拼接？

Question

在这里使用 vue，特别是 vuex，尽管它可能是普通 js 问题。我有一个购物车设置，可以在按下按钮时从产品列表推送到购物车，但我无法从购物车中删除。这是我的方法；

child 通过按钮调用 Action ；

<b-button @click="removeItem" variant="primary">Remove from Cart</b-button>

data() {
    return {
        singleCart: this.items,
    };
},
methods: {
    removeItem() {
        this.$store.dispatch("DELETE_CART_ITEM", this.singleCart.item_id);
    },
},

以及我的 vuex store 中的逻辑；

const actions = {
    ADD_TO_CART: (context, payload) => {
        context.commit('MUTATE_CART', payload)
    },
    DELETE_CART_ITEM: (context, payload) => {
        context.commit('DELETE_FROM_CART', payload)
    }
}

const mutations = {
    MUTATE_CART: (state, item) => {
        state.cart.push(item)
    },
    DELETE_FROM_CART: (state, payload) => {
        //filter the array for the item id, then splice it?

        console.log(payload)

        var index = state.cart.findIndex(item => item.item_id === payload)

        console.log(index)

        console.log(typeof index)

        state.cart.splice(index, 1)
    }
}

我的所有日​​志记录都显示了正确的有效负载和购物车中商品的正确索引，但是当拼接发生时，它正在删除列表中的最后一个商品，即使它被传递了一个起始索引。

例如，如果我在购物车中有 3 件商品，我想删除第二件，它会找到正确的索引，在这种情况下为 1，将其记录下来以确保确定，然后无论出于何种原因，splice 都会删除购物车上的最后一件商品列表。为什么？我该怎么做才能解决这个问题？

解决方案:原来我只是对最终应该如何调用我的 getter 数据感到困惑，解决方案是在父组件中循环购物车项目并使用计算属性来获取它；

<div v-for="item in cart" :key="item.id">
<cartProduct :items="item" />
</div>

computed: {
    cart() {
        return this.$store.getters.GET_CART 
    }
},

因此是被动的。

Answer 1

这是一个奇怪的 Vue 警告。以下是在这种情况下不起作用的示例。

DELETE_FROM_CART: (state, payload) => {
        var index = state.cart.findIndex(item => item.item_id === payload);
        var dummy = state.cart.slice();
        dummy.splice(index, 1);
        state.cart = dummy;
    }