setup artist discography page

src/views/AlbumsGrid.vue

@@ -1,43 +1,46 @@
 <template>
   <div class="album-grid-view v-scroll-page">
-    <div class="scrollable">
-      <AlbumCard v-for="album in albums" :album="album" :key="Math.random()" />
+    <div class="scrollable" v-auto-animate="{ duration: 100 }">
+      <AlbumCard
+        v-for="album in artist.toShow"
+        :album="album"
+        :key="album.albumhash"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import useArtistPageStore from "@/stores/pages/artist";
+import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
 import AlbumCard from "@/components/shared/AlbumCard.vue";
-import { getArtistAlbums } from "@/composables/fetch/artists";
 
-import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
-import { Album } from "@/interfaces";
+import { onMounted } from "vue";
+import { onBeforeRouteLeave, useRoute } from "vue-router";
 
-const artist = useArtistPageStore();
+const artist = useArtistDiscographyStore();
 const route = useRoute();
 
-const albums = ref(<Album[]>[]);
-
 onMounted(() => {
-  // artist.getArtistAlbums(route.params.hash);
-  getArtistAlbums(route.params.hash as string).then((res) => {
-    albums.value = res.appearances;
-    // console.log(albums.value);
-  });
+  artist.fetchAlbums(route.params.hash as string);
+});
+
+onBeforeRouteLeave(() => {
+  artist.resetAlbums();
 });
 </script>
 
 <style lang="scss">
 .album-grid-view {
-  // border: solid;
+  height: 100%;
 
   .scrollable {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     grid-gap: $small;
     padding: 0 1rem;
+    padding-bottom: 4rem;
+    overflow: auto;
+    max-height: 100%;
   }
 }
 </style>