Vuex Store 中的分页

Posted 2023-02-22

【中文标题】Vuex Store 中的分页

【英文标题】：Pagination in Vuex Store

【发布时间】：2020-01-19 03:46:04

【问题描述】：

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

【问题讨论】：

我认为你不需要一个新的分页模块，你可以通过方法操作中的数据属性发送分页数据，比如totalPage和currentPage

显示一些代码？

【参考方案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
    );
  ,

希望这对你有用。

【讨论】：

我从 vuex 中取出数据，我不习惯将所有数据存储在 vuex 中，因为它会随着时间的推移而变大。我将在没有 vuex 的情况下使用您的解决方案。谢谢。

@LDUBBS 您可以随着时间的推移创建单独的文件和模型。主要优势是单一数据源。

再试一次，迈克，我仍然无法将您的解决方案应用于映射的状态和操作。

请在此处发布您的代码，您是使用pagination 的任何插件还是自己做？同时发布您的控制器代码。

把它移到这里***.com/questions/58106049/…

【参考方案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
        
    
);

【讨论】：

这也可以，但是当我将产品添加到购物车时会发生一些奇怪的事情。仅添加第一项。