Vue/Vuex调用action时报removeProductFromCart is not a function错误求助

1 报错直接原因修复 #

报错TypeError: _vm.removeProductFromCart is not a function的核心原因是Cart组件实例上不存在removeProductFromCart方法，对应两种常见场景：

• 你在Cart组件的<template>部分给删除按钮绑定的点击事件是@click="removeProductFromCart(id)"，但组件methods里只声明了removeFromCart方法，方法名不匹配。直接把模板里的点击事件绑定修改为@click="removeFromCart(id)"即可解决该报错。
• 如果你是通过Vuex的mapActions辅助函数把removeProductFromCart映射为组件方法，检查mapActions的导入路径、映射配置是否正确，配置错误也会触发该报错。

2 隐藏逻辑bug修复 #

你当前编写的Mutation代码和State结构不匹配，即使解决了上述报错也无法完成商品删除操作：
你的State中商品列表存储在state.cart.attributes.items数组内，但现有Mutation直接对state.cart对象执行filter操作，对象本身不具备filter方法，后续调用会触发新的报错。正确的Mutation写法如下：

export const REMOVE_PRODUCT_FROM_CART = (state, id) => {
    state.cart.attributes.items = state.cart.attributes.items.filter(item => {
        return item.id !== id;
    })
}

3 语法错误修正 #

你的Store入口index.js代码末尾存在多余的闭合大括号}，属于无效语法，直接删除该冗余大括号即可。

内容的提问来源于stack exchange，提问作者magic bean