Zmiana instancji store'a na Pinia

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>