如何在Vuex的shippingFees数组中按ID判断对象并执行对应操作？

我来帮你搞定这个Vuex数组更新的问题！你现在的核心需求是：先检查shippingFees数组里是否存在携带目标ID的对象，存在就替换，不存在就新增。之前的遍历逻辑没做前置判断导致重复添加，用findIndex方法就能完美解决这个问题，下面是具体的实现方案：

具体实现代码（Vuex Mutation中） #

// 在你的Vuex store的mutations模块里
UPDATE_SHIPPING_FEES(state, payload) {
    // 第一步：查找数组中ID匹配的元素索引
    const targetIndex = state.shippingFees.findIndex(item => item.id === payload.id);

    if (targetIndex !== -1) {
        // 情况1：找到匹配元素，替换它
        // 方式A：直接修改数组（Vue能够检测到这种更新）
        state.shippingFees[targetIndex] = payload;

        // 方式B：创建新数组（更符合immutable原则，适合严格模式或需要精准追踪状态变化的场景）
        // state.shippingFees = [
        //     ...state.shippingFees.slice(0, targetIndex),
        //     payload,
        //     ...state.shippingFees.slice(targetIndex + 1)
        // ];
    } else {
        // 情况2：未找到匹配元素，推入数组
        state.shippingFees.push(payload);
    }
}

逻辑说明 #

• findIndex会遍历数组，返回第一个匹配item.id === payload.id的元素索引；如果没有任何匹配项，返回-1。这个方法比你之前的遍历更高效，因为找到匹配项后就会停止遍历。
• 两种替换方式的区别：
  • 方式A直接修改数组元素，Vue的响应式系统可以检测到这种更新，写法简单直接。
  • 方式B通过展开运算符创建新数组，遵循了状态不可变（immutable）的原则，在开启Vuex严格模式或者需要依赖状态变化做深层监听的场景下更推荐。

调用方式 #

在组件里调用这个mutation的时候，只需要传入包含目标ID的payload对象即可：

this.$store.commit('UPDATE_SHIPPING_FEES', { id: 123, /* 其他属性 */ });

内容的提问来源于stack exchange，提问作者Kris D. J.