페이지네비게이션 컴포넌트 > v-model get,set 속성 추가 Store Vue.set 사용법

pages/blogs/index.vue

@@ -24,8 +24,9 @@
             <div class="section">
               <no-ssr placeholder="Loading...">
                 <paginate
+                  v-model="currentPage"
                   :page-count="pagination.pageCount"
-                  :click-handler="handleClick"
+                  :click-handler="fetchBlogs"
                   :prev-text="'Prev'"
                   :next-text="'Next'"
                   :container-class="'paginationContainer'">
@@ -70,19 +71,47 @@ export default {
       publishedBlogs: state => state.blog.items.all,
       featuredBlogs: state => state.blog.items.featured,
       pagination: state => state.blog.pagination
-    })
+    }),
+    currentPage: {
+      get() {
+        return this.$store.state.blog.pagination.pageNum
+      },
+      set(value) {
+        this.$store.commit('blog/setPage', value)
+      }
+    }
   },
-  async fetch({store}) {
+  async fetch({store, query}) {
+     // Try to get values from query
     const filter = {}
-    filter.pageNum = 1
-    filter.pageSize = 2
+    const {pageNum, pageSize} = query
+    if (pageNum && pageSize) {
+      filter.pageNum =  parseInt(pageNum, 10)
+      filter.pageSize = parseInt(pageSize, 10)
+      store.commit('blog/setPage', filter.pageNum)
+    } else {
+      filter.pageNum = 1
+      filter.pageSize = 6
+    }
+
     await store.dispatch('blog/fetchBlogs', filter)
     await store.dispatch('blog/fetchFeaturedBlogs', {'filter[featured]': true})
   },
   methods: {
-    handleClick() {
-      alert('Page Clicked!')
-    }
+    setQueryPaginationParams() {
+      const { pageSize, pageNum } = this.pagination
+      this.$router.push({query: {pageNum, pageSize}})
+    },
+    async fetchBlogs() {
+      const filter = {}
+      filter.pageSize = this.pagination.pageSize
+      filter.pageNum = this.pagination.pageNum
+      // Here store the query params!
+      const result = await this.$store.dispatch('blog/fetchBlogs', filter)
+      if(result.isAxiosError !== true){
+        this.setQueryPaginationParams()
+      }
+    },
   }
 }
 </script>

store/blog.js

@@ -9,7 +9,7 @@ export const state = () => ({
   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
+    pageSize: 6, // How many items we want to display per page
     pageNum: 1 // Current page
   }
 })
@@ -59,8 +59,8 @@ export const mutations = {
   setBlogs(state, {resource, blogs}) {
     state.items[resource] = blogs
   },
-  setBlog(state, blog) {
-    state.item = blog
+  setPage(state, currentPage) {
+    Vue.set(state.pagination, 'pageNum', currentPage)
   },
   setPagination(state, {count, pageCount}) {
     Vue.set(state.pagination, 'count', count)