Fetch single image in fetch (#357)

* Fetch single image in asyncData * Fix the first image load
WordPress · Oct 26, 2021 · 02226b9 · 02226b9
1 parent fd8fa16
commit 02226b9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/src/pages/photos/_id.vue b/src/pages/photos/_id.vue
@@ -41,22 +41,19 @@ const PhotoDetailPage = {
   computed: {
     ...mapState(['image']),
   },
-  async asyncData({ env, route }) {
-    return {
-      thumbnailURL: `${env.apiUrl}thumbs/${route.params.id}`,
-      imageId: route.params.id,
-    }
-  },
   async fetch() {
+    this.imageId = this.$route.params.id
+    this.thumbnailURL = `${process.env.apiUrl}thumbs/${this.imageId}`
+
     try {
-      // Load the image
-      await this.$store.dispatch(`${FETCH_IMAGE}`, { id: this.imageId })
+      await this.fetchImage({ id: this.imageId })
     } catch (err) {
+      const errorMessage = this.$t('error.image-not-found', {
+        id: this.imageId,
+      })
       this.$nuxt.error({
         statusCode: 404,
-        message: this.$t('error.image-not-found', {
-          id: this.imageId,
-        }).toString(),
+        message: errorMessage,
       })
     }
   },
@@ -69,7 +66,7 @@ const PhotoDetailPage = {
     })
   },
   methods: {
-    ...mapActions([FETCH_IMAGE]),
+    ...mapActions({ fetchImage: FETCH_IMAGE }),
     onImageLoaded(event) {
       this.imageWidth = event.target.naturalWidth
       this.imageHeight = event.target.naturalHeight

diff --git a/src/store-modules/search-store.js b/src/store-modules/search-store.js
@@ -69,6 +69,8 @@ const state = {
   errorMessage: null,
   searchType: ALL_MEDIA,
   query: {},
+  audio: {},
+  image: {},
 }
 
 const actions = (services) => ({