nuxtServerInit 사용법

components/shared/Hero.vue

@@ -4,25 +4,42 @@
     <div class="hero-body">
       <div
         class="hero-img"
-        :style="{ background : `url(https://images.unsplash.com/photo-1510519138101-570d1dca3d66?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1631&q=80) no-repeat center center`}">
+         :style="{ background : `url(${image}) no-repeat center center`}">
       </div>
       <div class="container">
         <h1 class="title">
-          Super Amazing Promo
+          {{title}}
         </h1>
         <h2 class="subtitle">
-          Super Amazing Promo Subtitle
+          {{subtitle}}
         </h2>
-        <a target="_" :href="'#'" class="button is-danger">Learn More!</a>
+        <a target="_" :href="promoLink" class="button is-danger">Learn More!</a>
       </div>
     </div>
   </section>
 </template>
 
 <script>
-export default {
-  
-}
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: 'Super Amazing Promo'
+      },
+      subtitle: {
+        type: String,
+        default: 'Super Amazing Promo Subtitle'
+      },
+      image: {
+        type: String,
+        default: 'https://images.unsplash.com/photo-1510519138101-570d1dca3d66?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1631&q=80'
+      },
+      promoLink: {
+        type: String,
+        default: '#'
+      },
+    }
+  }
 </script>
 
 <style lang="scss" scoped>

pages/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
     <!-- HERO -->
-    <Hero/>
+    <hero
+      :title="courseHero.title"
+      :subtitle="courseHero.subtitle"
+      :image="courseHero.image"
+      :promoLink="courseHero.product && courseHero.product.productLink"
+    />
     <!-- HERO -->
     <section class="section">
       <div class="container">
@@ -53,6 +58,7 @@ export default {
       // }
       courses : state => state.course.items,
       featuredBlogs: state => state.blog.items.featured,
+      courseHero: state => state.hero.item
     })
   },
   async fetch({store}) {

store/hero.js

@@ -12,6 +12,16 @@ export const actions = {
     }
     commit('setHero', hero)
     return state.item
+  },
+  async fetchHero({commit, state}) {
+    const data = await this.$axios.$get('/api/v1')
+    if(data.isAxiosError === true){
+      console.log(data.data)
+      return Error('')
+    }
+    const { productHero } = data
+    commit('setHero', productHero)
+    return state.item
   }
 }
 

store/index.js

@@ -10,5 +10,8 @@ export const actions = {
     console.log('index.js actions call await dispatch(auth/getAuthUser)')
     await dispatch('auth/getAuthUser').catch(() => console.log('Not Authenticated!'))
     console.log('index.js actions done await dispatch(auth/getAuthUser)')
+    console.log('index.js actions call await dispatch(hero/fetchHero)')
+    await dispatch('hero/fetchHero').catch(() => console.log('Cannot fetch page data'))
+    console.log('index.js actions done await dispatch(hero/fetchHero)')
   }
 }