Splice 没有从给出的索引中拼接？

Posted 2023-02-22

【中文标题】Splice 没有从给出的索引中拼接？

【英文标题】：Splice not splicing from the index its being given?

【发布时间】：2021-02-03 14:30:21

【问题描述】：

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

从按钮调用动作的孩子；

<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 商店中的逻辑；

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 
    
,

因此是被动的。

【参考方案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;
    

【讨论】：

遗憾的是，我已经尝试过该行，记录了正确的有效负载，并调用了突变，但由于某种原因，购物车没有更新到新数组。编辑：在给状态一个日志时，记录的数组实际上已经改变了，但只是不更新​​组件 vue。

这是因为 Vue 的工作原理——我会更新帖子以使其正常工作

Vue 在这种情况下并不总是更新。 Vue.set 让它知道，所以它会更新。试试这个。

我猜这不完全是一个普通的 JS 问题。

更改为 Vue.set 后，组件仍然没有重新主动更新