refactor: code organization

src/components/RoutesModal.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="bg" @click="closeRoutesModal"></div>
-  <div class="routes-modal" v-if="store.currentStation" @keydown.esc="closeRoutesModal" tabindex="0" ref="modal">
+  <div class="routes-modal" v-if="sceneriesStore.currentStation" @keydown.esc="closeRoutesModal" tabindex="0" ref="modal">
     <div class="modal-content">
       <div class="modal-wrapper">
         <h1>
-          Szlaki na scenerii {{ store.currentStation.name }}
+          Szlaki na scenerii {{ sceneriesStore.currentStation.name }}
           <div class="exit" @click="closeRoutesModal">
             <img src="/icon-exit.svg" alt="exit icon" />
           </div>
@@ -103,17 +103,17 @@
 <script lang="ts">
 import { Ref, computed, defineComponent, ref } from 'vue';
 import changeMixin from '../mixins/changeMixin';
-import { useStore } from '../store';
-import { SceneryRoutesInfo } from '../types/types';
+import { SceneryRoutesInfo } from '../types/sceneries.types';
+import { useSceneriesStore } from '../stores/sceneries.store';
 
 export default defineComponent({
   setup() {
-    const store = useStore();
+    const sceneriesStore = useSceneriesStore();
     const currentRoutes: Ref<SceneryRoutesInfo[]> = ref([]);
     const routeBackup: Ref<SceneryRoutesInfo[]> = ref([]);
 
     return {
-      store,
+      sceneriesStore,
       routeBackup,
       currentRoutes,
     };
@@ -121,13 +121,11 @@ export default defineComponent({
 
   mixins: [changeMixin],
 
-  data: () => ({}),
-
   mounted() {
-    if (this.store.currentStation) {
+    if (this.sceneriesStore.currentStation) {
       // unrefed copy of routesInfo object
-      this.currentRoutes = JSON.parse(JSON.stringify(this.store.currentStation.routesInfo));
-      this.routeBackup = [...this.store.currentStation.routesInfo];
+      this.currentRoutes = JSON.parse(JSON.stringify(this.sceneriesStore.currentStation.routesInfo));
+      this.routeBackup = [...this.sceneriesStore.currentStation.routesInfo];
 
       (this.$refs['modal'] as HTMLElement).focus();
     }
@@ -135,7 +133,7 @@ export default defineComponent({
 
   methods: {
     closeRoutesModal() {
-      this.store.currentStation = null;
+      this.sceneriesStore.currentStation = null;
     },
 
     addNewRoute() {
@@ -157,7 +155,7 @@ export default defineComponent({
     },
 
     parseRoutes() {
-      const routeString = this.store.currentStation?.routesInfo
+      const routeString = this.sceneriesStore.currentStation?.routesInfo
         .map(
           (route) =>
             `${route.isInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${route.isElectric ? 'E' : 'N'}${
@@ -170,14 +168,12 @@ export default defineComponent({
     },
 
     saveRoutes() {
-      const index = this.store.stationList.findIndex((station) => station.name === this.store.currentStation?.name);
+      const index = this.sceneriesStore.stationList.findIndex((station) => station.name === this.sceneriesStore.currentStation?.name);
 
       if (index == -1) return;
 
-      // const routeString = this.parseRoutes();
-
-      this.addChange(this.store.currentStation!, 'routesInfo', this.routeBackup, this.currentRoutes);
-      this.store.stationList[index]['routesInfo'] = this.currentRoutes;
+      this.addChange(this.sceneriesStore.currentStation!, 'routesInfo', this.routeBackup, this.currentRoutes);
+      this.sceneriesStore.stationList[index]['routesInfo'] = this.currentRoutes;
     },
   },
 });