Пагинация в магазине Vuex

Пагинация в магазине Vuex

18.09.2019 11:37:15 Просмотров 52 Источник

Я клонировал этот удивительный РЕПО корзины из 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, заранее спасибо.

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/57988462/pagination-in-vuex-store#comment102385743_57988462
Я думаю, вам не нужен новый модуль для разбиения на страницы, вы можете просто отправить данные разбиения на страницы через свойство data в действии метода, например totalPage и currentPage
https://stackoverflow.com/questions/57988462/pagination-in-vuex-store#comment102390800_57988462
Показать какой-то код?

Ответы - Пагинация в магазине Vuex / Pagination in Vuex Store

spiCkyyy

18.09.2019 01:14:46

Вам нужно определить мета-объект, чтобы сохранить метаданные, возвращаемые из Вашего сообщения axio. Затем, вы можете использовать этот мета-объект в своем Вью.

Сделайте что-нибудь вроде этого:

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
        }
    }
});
https://stackoverflow.com/questions/57988462/pagination-in-vuex-store/57990376#comment102588343_57990376
Это тоже работает, но что-то странное происходит, когда я добавляю продукты в корзину. Добавляется только первый элемент.
Является ответом!
Mike Ross

18.09.2019 02:51:53

Попробуйте следующее

Я использую один из RenderlessLaravelVuePagination

а оставшийся код находится ниже

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

Надеюсь, это сработает для вас.

https://stackoverflow.com/questions/57988462/pagination-in-vuex-store/57992134#comment102404300_57992134
я вынул данные из vuex, мне было неудобно хранить все эти данные в vuex, поскольку он становится большим с течением времени. Я буду использовать ваше решение только без vuex. Спасибо.
https://stackoverflow.com/questions/57988462/pagination-in-vuex-store/57992134#comment102409329_57992134
@LDUBBS вы можете создавать отдельные файлы и модели с течением времени. Главное преимущество-единый источник данных.
https://stackoverflow.com/questions/57988462/pagination-in-vuex-store/57992134#comment102604938_57992134
Майк, я все еще не могу применить ваше решение к отображенным состояниям и действиям.
https://stackoverflow.com/questions/57988462/pagination-in-vuex-store/57992134#comment102605785_57992134
Разместите свой код здесь, пожалуйста, вы используете какой-либо плагин для paginationна страницы или делаете это самостоятельно? Опубликуйте свой код контроллера.
https://stackoverflow.com/questions/57988462/pagination-in-vuex-store/57992134#comment102608619_57992134
Вроде как переместил его сюда stackoverflow.com/questions/58106049/…
Закрыть X