Vuex Store 中的分页

Question

我从https://github.com/vueschool/learn-vuex 克隆了这个很棒的购物车回购，我得到这样的数据：

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 商店中创建分页状态或新模块，提前致谢。

Answer 1

尝试关注

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

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

希望这对你有用。

Answer 2

您需要定义元对象以存储从您的 axio 帖子返回的元数据。然后，您可以在您的 vue 中使用该元对象。

做这样的事情：

export default new Vuex.Store({
    state: {
        products: {},
        productsMeta: {}

    },
    actions: {
        getProducts({commit},data) {
            axios.get(`api/product`).then(response => {
            this.productsMeta = response.meta;
            }).commit('updateProducts', response.data);
        })
    },
    mutations: {
        updateProducts (state, products) {
            state.products = products
        }
    }
});