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

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

ProductList.vue


-{{product.name}-{{product.price}


方法：{
…映射操作({
fetchProducts:“产品/fetchProducts”
})
}
导出默认的新Vuex.Store({
声明：{
产品：{}，
},
行动：{
获取产品（{commit}，数据）{
get（`api/product`）。然后（（响应）=>{
提交（'updateProducts'，response.data）；
})
},
突变：{
更新产品（状态、产品）{
state.products=产品
}
}
});

---

我正在尝试对结果进行分页，需要这方面的帮助，我是否需要在vuex存储中创建分页状态或新模块，请提前感谢。

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

这样做：

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

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

试着跟随

我使用其中一个

RenderlessLaravelVuePagination

组件进行分页

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

---

希望这对您有用。

我认为您不需要新的分页模块，您可以通过方法操作中的data属性发送分页数据，如totalPage和CurrentPage显示一些代码？我从vuex中取出数据，我不习惯将所有数据存储在vuex中，因为随着时间的推移，这些数据会越来越大。我将使用您的解决方案没有vuex。谢谢。@LDUBBS您可以随着时间的推移创建单独的文件和模型。主要优点是单一数据源。请再试一次，Mike，我仍然无法将您的解决方案应用于映射的状态和操作。请在此处发布您的代码，您是使用

分页的插件还是自己执行？将控制器代码作为w发布嗯。有点把它移到这里了。这也行，但当我把产品添加到购物车时，会发生一些奇怪的事情。只添加了第一个项目。