Vue SPA & Vuex with Laravel server-side pagination

  laravel, vue.js, vuex

I have a vue SPA with a laravel API. I have a client side Vuex store and I’m trying to understand if there is any purpose of Vuex in regards to pagination.

Let’s use our users table I want to list all the users by pages of 30. If I have 300 users that is 10 pages of data. At 300 users, it seems valid to fetch them all and have client side pagination. Vuex is perfect in this use case.

Let’s assume our application hits it big and grows to 30,000 users. That’s 100 pages but now vuex seems less practical and could strain some systems to download that much information and store it in a client side store. Vuex seems like a fail.

In comes server side pagination from laravel. I fetch page 1 and store it in vuex. When I fetch page 2 do I overwrite the users state with the new 30 users or do I merge them? If I overwrite them then I can use my users getter and just loop out all my users on my index. If I merge them I need to know the ids on page 2 different from page 1 and each page going forward. I currently have the ids because I just fetched, but if I go back to page 1 how do I know what users to display without hitting the server again? If I’m hitting the server again why waste time saving anything in vuex and just use a variable in the component?

Source: Laravel

Leave a Reply