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

您需要定义元对象以便存储从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
        }
    }
});

Answer 2

尝试关注

我使用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商店中的分页

2 个答案: