Как сделать постраничный просмотр в nuxt.js с учетом ssr?

Question

[razer96]

Впервые столкнулся с разработкой интернет магазина на Nuxt.js. Хотелось бы узнать, как быстро и правильно сделать пагинацию?

Впервые столкнулся с разработкой SPA под интернет магазин. И уперся в вопрос пагинации. Как правильно сделать пагинацию? Возможно есть готовые ssr плагины?

Answer 1

[Максим]

Если все правильно поняли, то

async asyncData(ctx) {
            let products = await ctx.app.$api.products(ctx.params.slug, ctx.query);
            return {
                products: products.data,
                total: products.total,
                perPage: products.per_page,
            }

watch: {
            '$route'() {
                this.getProducts();
            },
        },

getProducts() {
                this.$api.products(this.$route.params.slug, this.$route.query).then(products => {
                    this.products = products.data;
                    this.total = products.total;
                    this.perPage = products.per_page;
                });
            },

И при клике на пагинацию:

this.$router.push({
   query: {
      ...this.$route.query,
      page: page,
   },
})

Comments

[Evgeniy S]

вижу что код в asyncData и getProducts немного повторяется. как этого избежать?