setting up initial Pinia store state.

src/main.js

@@ -13,8 +13,11 @@ pinia.use(piniaPluginPersistedstate);
 vueApp.use(pinia);
 vueApp.config.globalProperties.$store = useMainStore();
 vueApp.mixin(baseMixin);
+useMainStore().populateInitialState();
 vueApp.use(router);
 vueApp.mount("#app");
 
 
 
+
+

src/store/index.js

@@ -3,66 +3,80 @@ import { endpoints } from "@/constants/endpoints.js";
 import globalMethods from "@/global-methods";
 import { storeActions } from "@/constants/store-actions";
 
+const getDefaultState = () => {
+  return {
+    order: {
+      vehicle: {
+        year: null,
+        make: null,
+        model: null,
+        style: null,
+        carId: null,
+        category: null,
+        vin: null,
+        imageUrl: null,
+        imageVifNumber: null,
+        imageColor: null,
+        registration: {
+          licensePlate: null,
+          address: null,
+          city: null,
+          state: null,
+          zipCode: null,
+          firstName: null,
+          lastName: null,
+        },
+      },
+      serviceLocation: {
+        address: null,
+        city: null,
+        state: null,
+        zipCode: null,
+      },
+      customer: {
+        emailAddress: null,
+      },
+      damage: {
+        isRepair: null,
+        numberOfChips: null,
+        glassToReplace: null,
+        partQuestionAnswers: null,
+        moldingQuestionAnswers: null,
+        capabilityQuestionAnswers: null
+      },
+      lineItems: {
+        glassParts: null
+      },
+      payment: {
+        isInsurance: null,
+        insuranceCoverage: {
+          isVerified: null
+        }
+      },
+      referralNumber: null,
+      referralDate: null,
+      referralCorrelationId: null,
+      accountNumber: 0,
+      eon: null
+    },
+    applicationUser: {
+      eventBus: [],
+      pageData: {},
+      saveOrderPromise: null,
+      savedSessionId: null,
+      crmCustomerId: null,
+      lastPageVisited: null,
+      experiments: [],
+      triggeredSiteEntry: false
+    },
+  };
+};
+
+export const state = getDefaultState();
+
 export const useMainStore = defineStore({
     id: 'main',
-    state()  {
-      return {
-        order: {
-          vehicle: {
-            year: null,
-            make: null,
-            model: null,
-            style: null,
-            carId: null,
-            category: null,
-            vin: null,
-            imageUrl: null,
-            imageVifNumber: null,
-            imageColor: null,
-            registration: {
-              licensePlate: null,
-              address: null,
-              city: null,
-              state: null,
-              zipCode: null,
-              firstName: null,
-              lastName: null,
-            },
-          },
-          serviceLocation: {
-            address: null,
-            city: null,
-            state: null,
-            zipCode: null,
-          },
-          customer: {
-            emailAddress: null,
-          },
-          damage: {
-            isRepair: null,
-            numberOfChips: null,
-            glassToReplace: null,
-            partQuestionAnswers: null,
-            moldingQuestionAnswers: null,
-            capabilityQuestionAnswers: null
-          },
-          lineItems: {
-            glassParts: null
-          },
-          payment: {
-            isInsurance: null,
-            insuranceCoverage: {
-              isVerified: null
-            }
-          },
-          referralNumber: null,
-          referralDate: null,
-          referralCorrelationId: null,
-          accountNumber: 0,
-          eon: null
-        },
-      };
-    },
+    state: () => state,
     getters: {},
     actions:
     {
@@ -82,6 +96,10 @@ export const useMainStore = defineStore({
             this.updateYear(year);
           }
       },
+      populateInitialState()
+      {
+         Object.assign(this.$state, getDefaultState());
+      }
     },
     persist: true
 });