Vuex 저장소의 페이지 지정

Vuex 저장소의 페이지 지정

나는 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 저장소에 새 모듈을 만들어야 할까?

다음을 시도해 보십시오.

나는 그 중 하나를 사용한다.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
    });
  },
}

이게 너에게 효과가 있길 바라.

악시오 포스트에서 돌아오는 메타 데이터를 저장하려면 메타 객체를 정의해야 한다.그러면, 너는 너의 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
        }
    }
});

참조URL: https://stackoverflow.com/questions/57988462/pagination-in-vuex-store