TypeError: _vm.removeProductFromCart 不是 vue/vuex 中的函数

Posted 2023-02-16

【中文标题】TypeError: _vm.removeProductFromCart 不是 vue/vuex 中的函数

【英文标题】：TypeError: _vm.removeProductFromCart is not a function in vue/vuex

【发布时间】：2021-12-13 09:55:01

【问题描述】：

我正在尝试从购物车中删除一个项目。所以我应该能够删除带有购物车 id 的项目。 我有一个 cartHelper，在那里我定义了我的 api 调用：

removeFromCart: function (id, callback = undefined) 
        return apiHelper.deleteRequest(
            `/carts/$this.cookieValue/remove-item`,
            (response) => 
                document.cookie = `$this.cartCookieName=$response.data.attributes.cart_guid;`;
                if (callback)  callback(response); 
            ,
            
                id: id
            
        )
    ,

后来我在我的购物车组件中调用了这个函数：

methods: 
    removeFromCart(id) 
        cartHelper.removeFromCart(id, () => 
            this.$store.dispatch('removeProductFromCart', id)
        );
    ,
,

我在下面定义了我的操作：

export const removeProductFromCart = ( commit , id) => 
    commit('REMOVE_PRODUCT_FROM_CART', id);

这是我的突变：

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

但是，当我单击按钮时，我在 Cart 组件中调用 removeFromCart，我得到“TypeError：_vm.removeProductFromCart 不是函数”，我无法弄清楚原因。如果你能帮助我，那就太好了。

编辑版本--------- 这是我的状态：

export default 
    cart: 
        "attributes": 
            "items": [],
        
    

还有我的 index.js 用于商店：

import Vue from 'vue';
import Vuex from "vuex";

Vue.use(Vuex);

import state from "./state";
import * as getters from './getters';
import * as mutations from "./mutations";
import * as actions from "./actions";

export default new Vuex.Store(
    state,
    getters,
    mutations,
    actions,
);

【问题讨论】：

removeProductFromCart 已导出，但我看不到它是否在商店的操作块中？

什么意思？我无法理解。那你觉得我应该怎么做？

你能显示store设置吗？

刚刚编辑了我的问题

在 removeFromCart 回调中尝试commit REMOVE_PRODUCT_FROM_CART 而不是调度 removeProductFromCart

【参考方案1】：

您似乎一直在调用@click 事件上的removeProductFromCart，而您的方法中不存在该事件。尝试在 @click 事件上调用 removeFromCart。