Pagination in Vuex Store

Question

I have cloned this awesome shopping cart repo from https://github.com/vueschool/learn-vuex, and i get data like this:

ProductList.vue

<template>
    <div>
<ul>
        <li v-for="product in products">
           - {{product.name}} - {{product.price}}
        </li>
      </ul>
</div>
</template>

<script>
methods: {
      ...mapActions({
        fetchProducts: 'products/fetchProducts'
      })
    }
</script>

export default new Vuex.Store({
    state: {
        products: {},
    },
    actions: {
    fetchProducts({commit},data) {
            axios.get(`api/product`).then((response) => {
            commit('updateProducts', response.data);
        })
    },
    mutations: {
        updateProducts (state, products) {
            state.products = products
        }
    }
});

I'm trying to paginate results and need help in that direction, do i need to create a pagination state or new module in the vuex store, thanks in advance.

Answer 1

Try following

I use one of the RenderlessLaravelVuePagination component for pagination.

<pagination :data="products" @pagination-change-page="getProducts"></pagination>

and remaining code is below

export default {
  name: 'ProductList',
  mounted() {
    this.getProducts();
  },
  methods: {
    getProducts(page = 1){
      this.$store.dispatch('getProducts',{
        page: page
    });
  },
}

Hope this works for you.