Remove product from Pinia state

Author: w3bdesign

components/Cart/CartContents.vue

@@ -58,17 +58,23 @@
 import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
 import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
 
+import { useCart } from "@/store/useCart";
+
 const isRemoving = useState("isRemoving", () => false);
 
+const cart = useCart();
+
 defineProps({
   showCheckoutButton: { type: Boolean, required: false, default: false },
 });
 
 const { data } = await useAsyncQuery(GET_CART_QUERY);
 
-const handleRemoveProduct = ({ key }) => {
+const handleRemoveProduct = (product) => {
   const updatedItems = [];
 
+  const { key } = product;
+
   updatedItems.push({
     key,
     quantity: 0,
@@ -82,6 +88,8 @@ const handleRemoveProduct = ({ key }) => {
     },
   };
 
+  cart.removeProductFromCart(product);
+
   const { mutate, onDone, onError } = useMutation(UPDATE_CART_MUTATION, {
     variables,
   });

store/useCart.js

@@ -23,7 +23,7 @@ export const useCart = defineStore("cartState", {
         this.cart.push(product);
       }
     },
-    removeProductFromCart({ product }) {
+    removeProductFromCart(product) {
       this.cart.splice(this.cart.indexOf(product), 1);
     },