pinia-plugin-persistedstate

Author: w3bdesign

components/Layout/LayoutCart.vue

@@ -66,24 +66,32 @@ const updateCartDisplay = () => {
     return;
   }
 
-  cartLength.value = data.value.cart.contents.nodes.reduce(
+  /*cartLength.value = data.value.cart.contents.nodes.reduce(
     (accumulator, argument) => accumulator + argument.quantity,
     0
   );
+*/
 
-  subTotal.value = data.value.cart.total;
+  cartLength.value = cart.getCartQuantity;
+
+  subTotal.value = cart.getCartTotal;
+
+  console.log("Pinia total: ", cart.getCartTotal);
+
+  //subTotal.value = data.value.cart.total;
 
   remoteError.value = error;
 };
 
-onBeforeMount(() => updateCartDisplay());
+onBeforeMount(() => {
+  execute();
+  updateCartDisplay();
+});
 
 setInterval(() => {
   if (process.client && !pending.value && getCookie("woo-session")) {
-    execute();
+    //execute();
     updateCartDisplay();
-
-    //console.log("Cart content from useCart: ", cart.getCartContent);
   }
 }, 3000);
 </script>

nuxt.config.ts

@@ -8,6 +8,7 @@ export default defineNuxtConfig({
   css: ["~/assets/css/main.css", "~/assets/css/animate.min.css"],
   modules: [
     "@pinia/nuxt",
+    "@pinia-plugin-persistedstate/nuxt",
     "@nuxtjs/apollo",
     "@formkit/nuxt",
     "@nuxtjs/algolia",

package-lock.json

@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@nuxtjs/apollo": "^5.0.0-alpha.5",
+    "@pinia-plugin-persistedstate/nuxt": "^1.0.0",
     "autoprefixer": "^10.4.13",
     "nuxt": "^3.1.2",
     "nuxt-icon": "^0.2.10",