Vuex商店中的分页

问题描述

我已经从> https://github.com/vueschool/learn- vuex ，我得到这样的数据:

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
        }
    }
});

我正在尝试对结果进行分页，并且需要该方向的帮助，我需要在vuex存储中创建分页状态或新模块吗?

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.

推荐答案

尝试关注

我使用RenderlessLaravelVuePagination组件之一进行分页.

I use one of the RenderlessLaravelVuePagination component for pagination.

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

，其余代码在下面

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

希望这对您有用.

这篇关于Vuex商店中的分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！