paging 만들기

1. page은 백엔드가 아닌 json 파일에서 가져와서 만든다.

all-product.json

{
  "allproduct":[
    {
      "id":9,
      "image": "https://picsum.photos/720/960/?image=476",
      "title": "Herschel supply co 25l",
      "link": "",
      "price": 75.00,
      "badge": "new"
    },
     .....
    {
      "id":10,
      "image": "https://picsum.photos/720/960/?image=478",
      "title": "Denim jacket blue",
      "link": "",
      "price": 92.50,
      "badge": null
    },    
  ],
  "total":24
  
}

2.api 를 작성

import http from "./http";
//aync es6 에 promise 가 좀 더  편하게 바뀌었다고 생각하면 됨
export default {
  async getAllProduct(page = 1) {
    return http.get("api/all-product.json", {
      page,
    });
  },
};

1. store 에 총상품을 담을 array선언

store/index.js

import allproductApi from "@/api/product";
export default {
  namespaced: true,  state: {
    //data
    allproduct: [],
    totalproduct: 0,
    page: 0,
  },

  mutations: {
   //모든상품
    setAllProduct(state, allproduct) {
      state.allproduct = [].concat(allproduct);
    },
    //paging 처리를 위한 상품 호출 count
    setAllProductCount(state, totalCount) {
      state.totalproduct = totalCount;
    },
    setPage(state, page) {
      state.page = page;
    },
  },
  actions: {
    async setAllProduct({ commit }, page = 0) {
      const response = await allproductApi.getAllProduct(page);
      // 모든상품데이터 호출
      commit("setAllProduct", response.data.allproduct);
      // 모든상품의 count 호출
      commit("setAllProductCount", response.data.total);
      commit("setPage", page);
    },
  },
};

ShopView template

<template>
  <div>
            <div class="flex-sb-m flex-w p-b-35">
              <span class="s-text8 p-t-5 p-b-5">
                Showing {{ page * 12 + 1 }}–{{ page * 12 + 12 }} of
                {{ totalProduct }} results
              </span>
            </div>

            <ProductList />
            <!-- Product -->
            <div class="row">
              <!-- Block2 -->
            </div>
            <!-- Pagination -->
            <div class="pagination flex-m flex-w p-t-26">
              <template v-for="(p, index) in totalproduct / 12">
                <button
                  :key="index"
                  class="item-pagination flex-c-m trans-0-4"
                  :class="{ 'active-pagination': p - 1 === page }"
                  @click="changePage(p - 1)"
                >
                  {{ p }}
                </button>
              </template>
  </div>
</template>

script

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    //스토어의 state에서 총상품의 카운트와 page 수를 가져온다.,
    ...mapState("product", ["totalproduct", "page"]),
  },
  methods: {
    changePage(page) {
      this.$store.dispatch("product/setAllProduct", page);
    },
  },
};
</script>

<style></style>