Vue3/Vuex中Filter函数无法移除数组对象问题求助

架构老林

2026-8-12

Vue3/Vuex购物车商品移除功能异常问题

在Vue3+Vuex开发的预订功能中，用户完成商品预订后需要将对应商品从购物车移除，但当前使用Filter函数无法移除数组中的目标对象，无法定位问题根源，附上相关代码及日志截图寻求帮助。

带有日志打印的`removeFromBasket` mutation代码

removeFromBasket(state, payload) {
        console.log('removeFromBasket', payload, JSON.parse(JSON.stringify(state.basket.items)))
    }

组件内调用移除功能的方法

removeFromBasket() {
      this.$store.commit('basket/removeFromBasket', this.bookableId);
}

Vuex basket模块完整代码

const state = {
    basket: {
        items: []
    },
};

const getters = {
    getCountOfItemsInBasket: (state) => {
        return state.basket.items.length
    },
    getAllItemsInBasket: (state) => {
        return state.basket.items
    },
    inBasketAlready(state) {
        return function (id) {
            return state.basket.items.reduce((result, item) => result || item.bookable.id === id, false);
        }
    },   
};

const actions = {};

const mutations = {
    addToBasket(state, payload) {
        state.basket.items.push(payload);
    },
    removeFromBasket(state, payload) {
        state.basket.items = state.basket.items.filter(item => item.bookable.id !== payload);
    }
};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
};