From 46dfc311de20b8cb4efc7a91b6d0df37785d71f7 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 3 Jul 2025 20:54:05 +0200
Subject: [PATCH 1/2] Refactor cart loading and error state handling

Replaces local isLoading and error refs with computed properties that directly use the store's reactive state. Removes unnecessary onMounted logic for fetching cart data.
---
 components/Layout/LayoutCart.vue | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/components/Layout/LayoutCart.vue b/components/Layout/LayoutCart.vue
index 51b816b1..f8ccbdce 100644
--- a/components/Layout/LayoutCart.vue
+++ b/components/Layout/LayoutCart.vue
@@ -48,24 +48,15 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { computed } from "vue";
 import { useCart } from "@/store/useCart";
 import { formatPrice } from "@/utils/functions";
 
 const cart = useCart();
-const isLoading = ref(true);
-const error = ref(null);
 
+// Use the store's reactive state directly
+const isLoading = computed(() => cart.loading);
+const error = computed(() => cart.error);
 const cartLength = computed(() => cart.cartQuantity);
 const cartSubtotal = computed(() => cart.cartSubtotal);
-
-onMounted(async () => {
-  try {
-    await cart.refetch();
-  } catch (err) {
-    error.value = err;
-  } finally {
-    isLoading.value = false;
-  }
-});
 </script>

From 11050f4d4d2b672ab5ce998694789a1193aaa62f Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 3 Jul 2025 20:55:51 +0200
Subject: [PATCH 2/2] Refactor CartContents to use store loading and error
 state

Replaces local isLoading and error refs with computed properties that reflect the cart store's loading and error state. Removes onMounted refetch logic in favor of relying on the store's state management.
---
 components/Cart/CartContents.vue | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/components/Cart/CartContents.vue b/components/Cart/CartContents.vue
index 1f08b7fc..6e3db5d3 100644
--- a/components/Cart/CartContents.vue
+++ b/components/Cart/CartContents.vue
@@ -32,7 +32,7 @@
  * @module CartContents
  * @returns {Object} The Vue.js component object.
  */
-import { computed, ref, onMounted } from "vue";
+import { computed } from "vue";
 import { useCart } from "@/store/useCart";
 
 const props = defineProps({
@@ -43,9 +43,10 @@ const props = defineProps({
 });
 
 const cart = useCart();
-const isLoading = ref(true);
-const error = ref(null);
 
+// Use the store's reactive state directly
+const isLoading = computed(() => cart.loading);
+const error = computed(() => cart.error);
 const cartItems = computed(() => cart.cart);
 
 /**
@@ -59,16 +60,6 @@ const handleRemoveProduct = async (key) => {
   } catch (error) {}
 };
 
-onMounted(async () => {
-  try {
-    await cart.refetch();
-  } catch (err) {
-    error.value = err;
-  } finally {
-    isLoading.value = false;
-  }
-});
-
 /**
  * Handles updating the quantity of a cart item.
  *