(已解决）vue vuex购物车删除项目，子组件不触发created或值没有得到更新

Question

removeItem(goods,index) {
    let carts = this.$api.user().deleteGoodsFromCart(goods);
    carts.then((res)=>{
        if(res.status === 200) {
            this.$notify({
                title: 'NOTICE',
                message: 'Successfully remove this item',
                type: "success",
                position: "top-left"
            });
            this.$store.commit("removeCartItem",{
                goods,
                index
            })
            console.log(this.$store.state.cartItems);
        }
    });
},

这是我一段购物车中删除一项的代码，这似乎没有什么问题

<div class="carts-item" v-for="(item,index) in $store.state.cartItems" :key="index">
    <div class="sipt">
        <el-checkbox 
            v-model="selectDoList[index]"
            ref="cartSelectGroup"
            :init="cartSelectInit(index)"
            @change="selectCartItem(item,...arguments)"
        ></el-checkbox>
    </div>
    <div class="icon">
        <img :src="item.image" />
    </div>
    <div class="desc">
        {{ item.title }}
        <div class="bd">
            <div class="pull-left">
                <ipt-number v-model="item.pieces"
                    @change="goodsNumberChange(index,arguments)"
                />
                <a title="Delete" @click="removeItem(item,index)">
                    <i class="far fa-trash-alt"></i>
                </a>
            </div>
            <div class="pull-right">
                <div class="price">$ {{ goodsPrice(item) }}</div>
            </div>
        </div>
    </div>
</div>

这个是购物车组件列表的部分模板代码，其中ipt-number是我写的一个数字输入框组件，用来修改商品的数量，但是当我删除一项时调用removeItem，console输出返回了正确的值，列表也删除了正确的一项得到了更新，但是删除的商品ipt-number值移动到了下一个商品的ipt-number值中，这是为什么呢,下面是一张问题的演示图

下面是简陋的数字输入框代码

<template>
    <div class="ipt-number">
        <div class="ipt-number-btn" @click="reduce">-</div>
        <div class="ipt-number-form">
            <input type="text" v-model="v" />
        </div>
        <div class="ipt-number-btn" @click="add">+</div>
    </div>
</template>
<script>
export default {
    props: {
        min: {
            type: Number,
            default: 1
        },
        max: {
            type: Number,
            default: Infinity
        },
        value: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            v: this.value
        }
    },
    watch: {
        v(currentValue,lastValue) {
            let val = parseInt(currentValue);
            if(isNaN(val)) {
                val = parseInt(lastValue);
                this.v = val;
            }
            this.$emit("change",val);
        }
    },
    methods: {
        isThan() {
            if(this.v > this.min) return true;
        },
        ifLess() {
            if(this.v < this.max) return true;
        },
        reduce() {
            this.v = parseInt(this.v);
            if(this.isThan()) {
                this.v--;
            }
        },
        add() {
            this.v = parseInt(this.v);
            if(this.ifLess()) {
                this.v += 1;
            }
        }
    }
}
</script>

这个输入框有一点不同的是，在这个购物车中，因为v-model是不能操作vuex的，所以我这个只写了简单的操作功能，v-model和:value在ipt-number组件中只起了一个初始化值的作用。当改变值的时候触发ipt-number 的change事件

Answer 1

我试了一下，不用 vuex，直接把数据放在 父组件data里是没问题的，感觉用 vuex 应该也不会出现问题

this.$store.commit("removeCartItem",{
    goods,
    index
}

你这个 removeCarItem 这个方法是怎么写的？