commit

src/layouts/vehicle-year/vehicle-year.vue

@@ -3,6 +3,9 @@
     <div class="fade-on-route-transition">
         <navButton type="button" text="back" :scenario="this.navigationScenarios.CLICKED_BACK"></navButton>
         <p>Vehicle Year Placeholder</p>
+        <input type="text" v-model="year"/>
+        <span>{{returnVehicleYear}}</span> 
+        <button @click="updateVehicleYear(year)">Add</button>
     </div>
 </div>
 </template>
@@ -13,5 +16,19 @@
     export default {
         name: 'vehicle-year',
         components: { navButton },
+        methods:
+        {
+            updateVehicleYear(item) 
+            {
+               this.mainStore.updateVehicleYear(item);
+            }
+        },
+        computed:
+        {
+            returnVehicleYear()
+            {
+               return this.mainStore.order.vehicle.year;
+            }
+        }
     }
 </script>

src/main.js

@@ -1,18 +1,16 @@
 import { createApp } from 'vue';
-import { createPinia } from "pinia";
 import App from './App.vue';
 import router from './router';
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-import { useMainStore } from './store';
+import { useMainStore, pinia } from '@/store';
 import baseMixin from "@/mixins/base-mixin.js";
 
 const vueApp = createApp(App);
 
 // Pinia
-const pinia = createPinia();
-pinia.use(piniaPluginPersistedstate);
 vueApp.use(pinia);
+pinia.use(piniaPluginPersistedstate);
 useMainStore().populateInitialState();
 
 // Additional Vue items to setup

src/mixins/base-mixin.js

@@ -3,10 +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 { useMainStore } from "@/store";
 import { mapStores } from "pinia";
 
-
 export default {
   data() {
     return {

src/router/index.js

@@ -3,6 +3,7 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader";
 import {issPageValues} from '@/router/router-constants/issPage-values';
 import { routingTable } from "@/router/router-constants/routing-table";
 import { useMainStore } from '@/store';
+import { pinia } from "../store";
 
 const routes = [
     {
@@ -54,7 +55,7 @@ const router = createRouter({
 // Get route information by page name.
 // This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
 async function GetRouteInfoFromPageName(pageName) {
-    const response = await this.mainStore.getRouteInfo(pageName);
+    const response = await useMainStore(pinia).getRouteInfo(pageName);
 
     const jsonFromResponse = JSON.parse(response.data.Result);
     let routeData = [];
@@ -122,7 +123,7 @@ function navigateToUrl(url, optionalQuery = {}) {
 function getNavigationMap (scenario, currentRoute) {
     const issPageValue = currentRoute.query.issPage;
     try {
-        const matchedQueryValue = routingTable(useMainStore())
+        const matchedQueryValue = routingTable(useMainStore(pinia))
         .filter(
             (item) =>
                 item.issPageValue === issPageValue &&

src/store/index.js

@@ -1,4 +1,4 @@
-import { defineStore } from "pinia";
+import { defineStore, createPinia } from "pinia";
 import { endpoints } from "@/constants/endpoints.js";
 import globalMethods from "@/global-methods";
 import { applicationConfig } from "@/constants/application-config";
@@ -51,7 +51,7 @@ export const useMainStore = defineStore({
     actions:
     {
         // Content API Actions
-      getRouteInfo(context, { pageName }) {
+      getRouteInfo(pageName) {
         return globalMethods.callHttpClient({
           method: endpoints.GetRouteInfo.method,
           endpoint: endpoints.GetRouteInfo.url(applicationConfig.APPLICATION_ABBREVIATION),
@@ -60,13 +60,13 @@ export const useMainStore = defineStore({
           },
         });
       },
-      getHomepageName(context) {
+      getHomepageName() {
         return globalMethods.callHttpClient({
           method: endpoints.GetHomepageInfo.method,
           endpoint: endpoints.GetHomepageInfo.url(applicationConfig.APPLICATION_ABBREVIATION),
         });
       },
-      getPageData(context, { pageName }) {
+      getPageData(pageName) {
         return globalMethods.callHttpClient({
           method: endpoints.GetPageData.method,
           endpoint: endpoints.GetPageData.url(applicationConfig.APPLICATION_ABBREVIATION, pageName),
@@ -93,4 +93,4 @@ export const useMainStore = defineStore({
     persist: true
 });
 
-  
+export const pinia = createPinia();

vue.config.js

@@ -1,4 +1,4 @@
-process.env.VUE_APP_CONSUMER_CF_DISTRO ="https://digitalapi.dev.sagaws.net";
+process.env.VUE_APP_CONSUMER_CF_DISTRO ="https://digitalapi.dev.safelite.io";
 process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
 
 module.exports = {