commit

src/layouts/vehicle-make/vehicle-make.vue

@@ -3,7 +3,7 @@
         <input type="text" v-model="year"/>
         <span> Vehicle Make Placeholder </span>
         <span>{{returnVehicleYear}}</span> 
-        <button @click="addYear(year)">Add</button>
+        <button @click="updateVehicleYear(year)">Add</button>
     </div>
 </template>
 
@@ -12,16 +12,16 @@
         name: 'vehicle-make',
         methods:
         {
-            addYear(item) 
+            updateVehicleYear(item) 
             {
-               this.$store.saveVehicleYear(item);
+               this.mainStore.updateVehicleYear(item);
             }
         },
         computed:
         {
             returnVehicleYear()
             {
-               return this.$store.order.vehicle.year;
+               return this.mainStore.order.vehicle.year;
             }
         }
     }

src/main.js

@@ -13,16 +13,15 @@ const vueApp = createApp(App);
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 vueApp.use(pinia);
-vueApp.config.globalProperties.$store = useMainStore();
 useMainStore().populateInitialState();
 
 // Additional Vue items to setup
 vueApp.mixin(baseMixin);
 vueApp.use(router);
-
 vueApp.mount("#app");
 
 
 
 
 
+

src/mixins/base-mixin.js

@@ -3,6 +3,9 @@ import { navigationScenarios } from "@/router/router-constants/navigation-scenar
 import { vehicleCategories } from "@/constants/vehicle-categories.js";
 import { queryStrings } from "@/constants/query-strings";
 import { dynamicStrings } from "@/constants/dynamic-strings";
+import { useMainStore } from "../store";
+import { mapStores } from "pinia";
+
 
 export default {
   data() {
@@ -19,6 +22,8 @@ export default {
     },
   },
   computed: {
+        // store will be accessible globally as its id + 'Store'
+    ...mapStores(useMainStore),
     storeActions() {
       return storeActions;
     },

src/store/index.js

@@ -48,10 +48,10 @@ export const useMainStore = defineStore({
     actions:
     {
       // Vehicle
-      saveVehicleYear(year) 
+      updateVehicleYear(year) 
       {
           if (this.order.vehicle.year !== year) {
-            this.updateYear(year);
+            this.order.vehicle.year = year;
           }
       },
       populateInitialState()
@@ -63,4 +63,5 @@ export const useMainStore = defineStore({
     },
     persist: true
 });
+