Vuex to store all my product information and API request query

Viewed 962

This is a bit of a Vue/Vuex efficiency / confirming best practice question.

I have an API returning a paginated data-set of 50 products, of which I am saving in a Vuex store.

For my "show all products" view I'm iterating over the Vuex store.

For my individual product route I'm in two minds whether to load the product directly from the Vuex store (meaning there isn't any need to request the product again, hence faster.) OR to just request that product from my API.

I guess the trade off is the initial request to the API would need to respond with more data than what the user would initially be exposed to in the "show all products" view, and hence it seems a bit wasteful.

Any thoughts and opinions on this? Just want to confirm my thoughts really with another person.

Also with Vuex, is it feasible to keep appending data to the store? for example if the user was cycling through more products, should I be appending the additional data back from the API into the store, or just keeping a rolling 50 records for example?

Thanks a lot!

Phil

1 Answers

I really don't think it's such a good idea to have all the data in the vuex, I would use Vuex more for things like managing and maintaining a shopping cart, or some other states...

If your products database is well indexed, and you get only one page of products, your REST calls should be fast enough. You probably should invest more time improving your Database and Db - queries. This would improve even more the responsiveness of your Rest call...

You should also think that most users won't go further than the 3rd or 4th page of products without refining the search, so a good search is more important.

The problem if you use vuex, is that it really gets slow if you store a lot of data (I have done it), and it gets even slower if you use mutations and getters.

If you really would like to store the products on the clients, because you have potentially users that have bad connection or so, then I would recommend the use of some other offline storage features like IndexedDB (don't use LocalStorage or WebSQL they are old and/or Vendor specific)...

I hope this helps you decide.

Related