Zmiana instancji store'a na Pinia

src/components/App/StatusIndicator.vue

@@ -154,25 +154,20 @@
       </svg>
 
       <transition name="tooltip-anim">
-        <div v-html="$t(indicator.message)" class="indicator-tooltip" v-if="tooltipActive">
-          
-        </div>
+        <div v-html="$t(indicator.message)" class="indicator-tooltip" v-if="tooltipActive"></div>
       </transition>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { GETTERS } from '@/constants/storeConstants';
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { StoreData } from '@/scripts/interfaces/StoreData';
-import { useStore } from '@/store';
-import { State } from '@/store/types';
-import { computed, defineComponent } from 'vue';
-import { Store } from 'vuex';
+import { useStore } from '@/store/store';
+import { StoreState } from '@/store/storeTypes';
+import { computed, defineComponent, watch } from 'vue';
 
 export default defineComponent({
-
   data() {
     return {
       icons: {
@@ -197,46 +192,50 @@ export default defineComponent({
   },
 
   setup() {
-      const store: Store<State> = useStore();
+    const store = useStore();
 
-      return {
-        dataStatus: computed(() => store.getters[GETTERS.allData] as StoreData)
-      }
+    return {
+      dataStatus: store.dataStatuses,
+    };
   },
 
   watch: {
-    dataStatus(storeData: StoreData) {
-      const sceneryDataStatus = storeData.sceneryDataStatus;
-      const trainsDataStatus = storeData.trainsDataStatus;
-      const dispatcherDataStatus = storeData.dispatcherDataStatus;            
+    dataStatus: {
+      deep: true,
 
-      if (sceneryDataStatus == DataStatus.Error) {
-        this.setSignalStatus(sceneryDataStatus);
-        this.indicator.status = sceneryDataStatus;
-        this.indicator.message = 'data-status.S1a-sceneries';
-        return;
-      }
+      handler(statuses: StoreState['dataStatuses']) {
+        const sceneryDataStatus = statuses.sceneries;
+        const trainsDataStatus = statuses.trains;
+        const dispatcherDataStatus = statuses.dispatchers;
 
-      if (trainsDataStatus == DataStatus.Warning) {
-        this.setSignalStatus(trainsDataStatus);
-        this.indicator.status = trainsDataStatus;
-        this.indicator.message = 'data-status.S5-trains';
-        return;
-      }
+        if (sceneryDataStatus == DataStatus.Error) {
+          this.setSignalStatus(sceneryDataStatus);
+          this.indicator.status = sceneryDataStatus;
+          this.indicator.message = 'data-status.S1a-sceneries';
+          return;
+        }
 
-      if (dispatcherDataStatus == DataStatus.Warning) {
-        this.setSignalStatus(dispatcherDataStatus);
-        this.indicator.status = dispatcherDataStatus;
-        this.indicator.message = 'data-status.S5-dispatchers';
-        return;
-      }
+        if (trainsDataStatus == DataStatus.Warning) {
+          this.setSignalStatus(trainsDataStatus);
+          this.indicator.status = trainsDataStatus;
+          this.indicator.message = 'data-status.S5-trains';
+          return;
+        }
 
-      if (sceneryDataStatus == DataStatus.Loaded) {
-        this.setSignalStatus(DataStatus.Loaded);
-  
-        this.indicator.status = DataStatus.Loaded;
-        this.indicator.message = 'data-status.S2';
-      }
+        if (dispatcherDataStatus == DataStatus.Warning) {
+          this.setSignalStatus(dispatcherDataStatus);
+          this.indicator.status = dispatcherDataStatus;
+          this.indicator.message = 'data-status.S5-dispatchers';
+          return;
+        }
+
+        if (sceneryDataStatus == DataStatus.Loaded) {
+          this.setSignalStatus(DataStatus.Loaded);
+
+          this.indicator.status = DataStatus.Loaded;
+          this.indicator.message = 'data-status.S2';
+        }
+      },
     },
   },
 

src/components/SceneryView/SceneryTimetable.vue

@@ -144,12 +144,11 @@ import Station from '@/scripts/interfaces/Station';
 import SelectBox from '../Global/SelectBox.vue';
 import { computed, defineComponent, ref } from '@vue/runtime-core';
 import { useRoute } from 'vue-router';
-import { useStore } from '@/store';
-import { GETTERS } from '@/constants/storeConstants';
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { ComputedRef } from 'vue';
 import dateMixin from '@/mixins/dateMixin';
 import routerMixin from '@/mixins/routerMixin';
+import { useStore } from '@/store/store';
 
 export default defineComponent({
   components: { SelectBox },
@@ -181,7 +180,7 @@ export default defineComponent({
 
     const store = useStore();
 
-    const trainsDataStatus = computed(() => store.getters[GETTERS.trainsDataStatus]) as ComputedRef<DataStatus>;
+    const trainsDataStatus = store.dataStatuses.trains;
 
     const selectedCheckpoint = ref(
       props.station?.generalInfo?.checkpoints?.length == 0

src/components/StationsView/StationFilterCard.vue

@@ -56,7 +56,13 @@
           </section>
 
           <section class="card_authors-search">
-            <input type="text" :placeholder="$t('filters.authors-search')" name="authors" v-model="authorsInputValue" @input="handleAuthorsInput" />
+            <input
+              type="text"
+              :placeholder="$t('filters.authors-search')"
+              name="authors"
+              v-model="authorsInputValue"
+              @input="handleAuthorsInput"
+            />
           </section>
 
           <section class="card_sliders">
@@ -107,12 +113,12 @@
 <script lang="ts">
 import { defineComponent, inject } from '@vue/runtime-core';
 
-import { GETTERS, MUTATIONS } from '@/constants/storeConstants';
 import inputData from '@/data/options.json';
 
 import StorageManager from '@/scripts/managers/storageManager';
 import ActionButton from '../Global/ActionButton.vue';
 import FilterOption from './FilterOption.vue';
+import { useStore } from '@/store/store';
 
 export default defineComponent({
   components: { ActionButton, FilterOption },
@@ -135,9 +141,11 @@ export default defineComponent({
 
   setup() {
     const isVisible = inject('isFilterCardVisible');
+    const store = useStore();
 
     return {
       isVisible,
+      store,
     };
   },
 
@@ -150,7 +158,7 @@ export default defineComponent({
       this.changeNumericFilterValue('onlineFromHours', this.minimumHours);
     }
 
-    this.currentRegion = this.$store.getters[GETTERS.currentRegion];
+    this.currentRegion = this.store.region;
   },
 
   methods: {
@@ -175,8 +183,6 @@ export default defineComponent({
     },
 
     handleAuthorsInput(e: Event) {
-      // if ((e.target as HTMLInputElement).value.length < 3) return;
-
       clearTimeout(this.delayInputTimer);
 
       this.delayInputTimer = setTimeout(() => {
@@ -185,7 +191,7 @@ export default defineComponent({
     },
 
     handleChangeRegion() {
-      this.$store.commit(MUTATIONS.SET_REGION, this.currentRegion);
+      this.store.region = this.currentRegion;
       this.closeCard();
     },
 

src/components/StationsView/StationTable.vue

@@ -231,10 +231,9 @@ import returnBtnMixin from '@/mixins/returnBtnMixin';
 
 import { DataStatus } from '@/scripts/enums/DataStatus';
 import { computed, ComputedRef, defineComponent } from '@vue/runtime-core';
-import { useStore } from '@/store';
-import { GETTERS } from '@/constants/storeConstants';
 import Station from '@/scripts/interfaces/Station';
 import { StoreData } from '@/scripts/interfaces/StoreData';
+import { useStore } from '@/store/store';
 
 export default defineComponent({
   props: {
@@ -280,10 +279,8 @@ export default defineComponent({
   setup() {
     const store = useStore();
 
-    const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
-
     const isDataLoaded = computed(() => {
-      return data.value.sceneryDataStatus != DataStatus.Loading;
+      return store.dataStatuses.sceneries != DataStatus.Loading;
     });
 
     return {
@@ -523,5 +520,4 @@ td.station {
 
   background: #333;
 }
-
 </style>

src/components/TrainsView/TrainTable.vue

@@ -38,7 +38,6 @@
 
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, inject, Ref, watchEffect } from '@vue/runtime-core';
-import { useStore } from '@/store';
 
 import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
 
@@ -48,8 +47,8 @@ import TrainSchedule from '@/components/TrainsView/TrainSchedule.vue';
 import TrainInfo from '@/components/TrainsView/TrainInfo.vue';
 
 import { DataStatus } from '@/scripts/enums/DataStatus';
-import { GETTERS } from '@/constants/storeConstants';
 import returnBtnMixin from '@/mixins/returnBtnMixin';
+import { useStore } from '@/store/store';
 
 export default defineComponent({
   components: {
@@ -81,7 +80,7 @@ export default defineComponent({
   setup(props) {
     const store = useStore();
 
-    const trainsDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.trainsDataStatus]);
+    const trainsDataStatus = store.dataStatuses.trains;
 
     const searchedTrain = inject('searchedTrain') as Ref<string>;
     const searchedDriver = inject('searchedDriver') as Ref<string>;
@@ -94,9 +93,9 @@ export default defineComponent({
       searchedTrain,
       searchedDriver,
       currentTrains,
+      trainsDataStatus,
 
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
-      trainsDataStatus: computed(() => trainsDataStatus.value),
       distanceLimitExceeded: computed(
         () => props.trains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) != -1
       ),
@@ -107,10 +106,6 @@ export default defineComponent({
     const query = this.$route.query;
 
     if (query.trainNo && query.driverName) {
-      const train = (this.$store.getters[GETTERS.trainList] as Train[]).find(
-        (train) => train.trainNo == Number(query.trainNo) && train.driverName == query.driverName!.toString()
-      );
-
       this.searchedDriver = query.driverName.toString();
       this.searchedTrain = query.trainNo.toString();