Merge pull request #1518 from w3bdesign/develop

Refactor cart loading and error state handling

Author: w3bdesign

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.
  *

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>