Cache album slider data

app/components/Album/Slider.vue

@@ -1,27 +1,39 @@
 <script setup lang="ts">
-const { data: genresData } = await useApiFetch<Genre[]>("/genres/random")
+const cacheKey = "album-slider-data"
+const data = ref<{ genre: Genre; albums: Album[] }[]>([])
 
-const data = await Promise.allSettled(
+onMounted(async () => {
-	(genresData.value ?? []).map(async (genre: Genre) => {
+	const cached = sessionStorage.getItem(cacheKey)
-		const albums = await cfetch<Album[]>(`/genres/albums/${genre._id}`)
+	if (cached) {
-
+		try {
-		return {
+			data.value = JSON.parse(cached)
-			genre,
+			return
-			albums,
+		} catch {
+			sessionStorage.removeItem(cacheKey)
 		}
-	}),
+	}
-).then((results) =>
+
-	results
+	const genres = await cfetch<Genre[]>("/genres/random")
+	const results = await Promise.allSettled(
+		(genres ?? []).map(async (genre) => ({
+			genre,
+			albums: await cfetch<Album[]>(`/genres/albums/${genre._id}`),
+		})),
+	)
+
+	data.value = results
 		.filter(
 			(
-				r,
+				result,
-			): r is PromiseFulfilledResult<{
+			): result is PromiseFulfilledResult<{
-				genre: any
+					genre: Genre
-				albums: any[]
+					albums: Album[]
-			}> => r.status === "fulfilled",
+				}> => result.status === "fulfilled",
-		)
-		.map((r) => r.value),
 		)
+		.map((result) => result.value)
+
+	sessionStorage.setItem(cacheKey, JSON.stringify(data.value))
+})
 </script>
 
 <template>

app/pages/index.vue

@@ -1,4 +1,5 @@
-<script setup lang="ts">useHead({ title: "Home" })
+<script setup lang="ts">
+useHead({ title: "Home" })
 </script>
 
 <template>