I am currently facing an issue with deleting an item from the cart. In order to successfully remove the item from the cart, I need to utilize the item's ID. Within my cartHelper, I have defined the API call as follows:
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
}
)
},
Subsequently, I invoke this function within my Cart component like so:
methods: {
removeFromCart(id) {
cartHelper.removeFromCart(id, () => {
this.$store.dispatch('removeProductFromCart', id)
});
},
},
In addition, I have defined the action in the following manner:
export const removeProductFromCart = ({ commit }, id) => {
commit('REMOVE_PRODUCT_FROM_CART', id);
}
And here is my mutation logic:
export const REMOVE_PRODUCT_FROM_CART = (state, id) => {
state.cart = state.cart.filter(item => {
return item.id !== id;
})
}
However, upon clicking the button linked to the removeFromCart function within my Cart component, I encounter the error message "TypeError: _vm.removeProductFromCart is not a function". I am at a loss as to why this error is occurring. Any assistance would be greatly appreciated.
Updated version--------- Here is an overview of my current state:
export default {
cart: {
"attributes": {
"items": [],
}
}
Furthermore, here is my index.js for the store:
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,
});
}