페이지네비게이션 컴포넌트 수정

pages/blogs/index.vue

@@ -24,7 +24,7 @@
             <div class="section">
               <no-ssr placeholder="Loading...">
                 <paginate
-                  :page-count="5"
+                  :page-count="pagination.pageCount"
                   :click-handler="handleClick"
                   :prev-text="'Prev'"
                   :next-text="'Next'"
@@ -69,10 +69,14 @@ export default {
     ...mapState({
       publishedBlogs: state => state.blog.items.all,
       featuredBlogs: state => state.blog.items.featured,
+      pagination: state => state.blog.pagination
     })
   },
   async fetch({store}) {
-    await store.dispatch('blog/fetchBlogs')
+    const filter = {}
+    filter.pageNum = 1
+    filter.pageSize = 2
+    await store.dispatch('blog/fetchBlogs', filter)
     await store.dispatch('blog/fetchFeaturedBlogs', {'filter[featured]': true})
   },
   methods: {

server/controllers/blog.js

@@ -36,7 +36,8 @@ exports.getBlogs = (req, res) => {
       return res.status(422).send(errors);
     }
 
-    Blog.count({})
+    // Blog.count({})
+    Blog.count({status: 'published'})
       .then(count => {
         return res.json({blogs: publishedBlogs, count, pageCount: Math.ceil(count / pageSize)});
       });

store/blog.js

@@ -1,20 +1,33 @@
+import Vue from 'vue'
+
 export const state = () => ({
   item: {},
   items: {
     all: [],
     featured: []
+  },
+  pagination: {
+    count: 0, // Count of all of our published blogs
+    pageCount: 0, // How many pages we want to display
+    pageSize: 2, // How many items we want to display per page
+    pageNum: 1 // Current page
   }
 })
 
 export const actions = {
-  async fetchBlogs({commit, state}) {
-    const data = await this.$axios.$get('/api/v1/blogs')
+  // /api/v1/blogs?pageNum=10&pageSize=2
+  async fetchBlogs({commit, state}, filter) {
+    const url = this.$applyParamsToUrl('/api/v1/blogs', filter)
+    const data = await this.$axios.$get(`${url}`)
     if(data.isAxiosError === true){
       console.log(data.data)
       return Error('')
     }
-    const { blogs } = data
+    // const { blogs } = data
+    // commit('setBlogs', {resource: 'all', blogs})
+    const { blogs, count, pageCount } = data
     commit('setBlogs', {resource: 'all', blogs})
+    commit('setPagination', {count, pageCount})
     return state.items.all
   },
 
@@ -37,7 +50,6 @@ export const actions = {
       console.log(blog.data)
       return Error('')
     }
-    debugger;
     commit('setBlog', blog)
     return state.item
   }
@@ -49,5 +61,9 @@ export const mutations = {
   },
   setBlog(state, blog) {
     state.item = blog
+  },
+  setPagination(state, {count, pageCount}) {
+    Vue.set(state.pagination, 'count', count)
+    Vue.set(state.pagination, 'pageCount', pageCount)
   }
 }