컴포넌트 props 속성 추가

components/BlogCard.vue

@@ -3,21 +3,30 @@
   <div class="card-content">
     <div class="media">
       <div class="media-content">
-        <p class="title is-4">Some Super Title</p>
-        <p class="subtitle is-6"><i>Some Super Subtitle</i></p>
+        <p class="title is-4">{{blog.title}}</p>
+        <p class="subtitle is-6"><i>by {{blog.author.name}}</i></p>
       </div>
     </div>
     <div class="content">
-      Some Description
+      {{blog.subtitle}}
       <br>
     </div>
   </div>
   <footer class="card-footer">
-    <nuxt-link :to="'#'" class="card-footer-item">Read More</nuxt-link>
+    <nuxt-link :to="`/blogs/${blog.slug}`" class="card-footer-item">Read More</nuxt-link>
   </footer>
 </div>
 </template>
-
+<script>
+export default {
+  props: {
+    blog: {
+      required: true,
+      type: Object
+    }
+  }
+}
+</script>
 <style lang="scss" scoped>
   .card-image:hover {
     cursor: pointer;

pages/blogs/index.vue

@@ -90,8 +90,11 @@ export default {
       filter.pageSize = parseInt(pageSize, 10)
       store.commit('blog/setPage', filter.pageNum)
     } else {
-      filter.pageNum = 1
-      filter.pageSize = 6
+      // filter.pageNum = 1
+      // filter.pageSize = 6
+      // TODO: Maybe getters ?
+      filter.pageNum = store.state.blog.pagination.pageNum
+      filter.pageSize = store.state.blog.pagination.pageSize
     }
 
     await store.dispatch('blog/fetchBlogs', filter)

pages/index.vue

@@ -6,7 +6,7 @@
     <section class="section">
       <div class="container">
         <h1 class="title">Featured Courses</h1>
-        <div class="columns">
+        <div class="columns is-multiline">
           <div 
             v-for="course in courses"
             :key="course._id"
@@ -21,10 +21,12 @@
     <section class="section">
       <div class="container">
         <h1 class="title">Featured Articles</h1>
-        <div class="columns">
-          <div class="column is-one-quarter">
-            <!-- CARD-ITEM -->
-            <BlogCard/>
+        <div class="columns is-multiline">
+          <div v-for="blog in featuredBlogs" :key="blog._id" class="column is-one-quarter">
+            <blog-card
+              :key="blog._id"
+              :blog="blog"
+            />
             <!-- CARD-ITEM-END -->
           </div>
         </div>
@@ -49,12 +51,14 @@ export default {
       //   console.log('index.vue mapState')
       //   return state.course.items
       // }
-      courses : state => state.course.items
+      courses : state => state.course.items,
+      featuredBlogs: state => state.blog.items.featured,
     })
   },
   async fetch({store}) {
     const result = await store.dispatch('course/fetchCourses')
     console.log('index.vue fetch')
+    await store.dispatch('blog/fetchFeaturedBlogs', {'filter[featured]': true})
   }
 }
 </script>