I am utilizing Vuex to store all of the product details and handle API request queries efficiently

Question regarding Vue/Vuex efficiency and best practices.

I am working with an API that returns a paginated data-set of 50 products, which I am storing in a Vuex store.

When displaying all products, I iterate over the Vuex store.

Now, for individual product routes, I am debating whether to fetch the product directly from the Vuex store for faster loading or to make a new request to the API.

The dilemma lies in the fact that the initial API request may return more data than initially needed, which seems inefficient.

Any thoughts on this decision? I would appreciate a second opinion.

Furthermore, when using Vuex, is it advisable to keep appending data to the store as users cycle through more products, or should I maintain a set number of records?

Thank you!

Phil

javascriptrestvue.jsvuejs2vuex

Answer №1

Storing all data in the Vuex might not be the best idea, as it could slow down your application. It is recommended to use Vuex for managing components like a shopping cart or other states.

If your products database is well optimized and you are only fetching one page of products at a time, your REST calls should be efficient enough. Focus on improving your database indexing and queries for better performance.

Keep in mind that most users typically do not go beyond the 3rd or 4th page of products without refining their search, so prioritizing a good search feature is key.

Using Vuex to store large amounts of data can result in slower performance, especially when using mutations and getters extensively.

If you need to store product data on the client side for users with poor connections, consider utilizing offline storage options like IndexedDB instead of outdated methods like LocalStorage or WebSQL.

Take these factors into consideration when making decisions for your project. Hope this information helps!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Lamenting the Perils of Losing AngularJS Rootscope Data upon Refresh

Currently, I am facing an issue in AngularJS 1.x. When I save a value in the $rootScope and pass to the next page or router, unfortunately, the $rootScope value gets lost upon refreshing the page (F5/Window Reload). I need a solution that doesn't inv ...

javascriptangularjs

Leverage the Nuxeo client SDK with Angular 6 for seamless integration with RESTClient in

Looking to integrate the Nuxeo ClientSdk with my Angular 6 client to consume its REST API, but facing issues due to the lack of typescript definitions for this JavaScript package. Tried importing the library into my project using the following code snippe ...

javascriptangulartypescripterror-lognuxeo

Interacting with an external Android library (Zebra) using Vue JS

I am fairly new to vue.js and currently working on integrating Zebra scanners' callback functionality into a Laravel + Jetstream project that uses Vue on the front-end. Our company utilizes Zebra scanners for stock movement, and I am tasked with brid ...

androidvue.js

Unable to retrieve component name using React.Children

While working with react in the nextjs framework, I attempted to create my own dropdown component structured as follows: <Dropdown> <DropdownToggle>Action</DropdownToggle> <DropdownMenu> <DropdownItem>Menu 1</Dr ...

javascriptreactjstypescriptnext.js

Rendering React.js components as children of DOM elements

Trying my hand at creating a custom Map component includes the task of designing a unique Map Annotation. Here's an example of how a MapAnnotation component appears in the render function: <MapAnnotation title='Annotation' latitude={ 12.3 ...

javascripthtmlcssreactjs

Exploring the power of nested routes in React Router 4: accessing /admin and / simultaneously

I'm encountering an issue with nested routing. The URLs on my normal site are different from those on the /admin page, and they have separate designs and HTML. I set up this sample routing, but whenever I refresh the page, it turns white without any ...

javascriptreactjsecmascript-6react-router

What is the method for changing the Uint8Array object into a string?

I am encountering a similar issue as the one discussed in this post. I have read the solution provided, but I am having trouble grasping how to implement it. Are there any alternative suggestions? Here is my code snippet: var eccrypto = require("eccrypto ...

javascriptreactjsnpm

Which is more memory efficient: creating an object with functions defined on it using a function, or creating an instance of a class?

Imagine if I were to create a hypothetical class (this is purely for demonstration purposes) class X { constructor(word, number) { this.wordNumberString = word + number; } saySomething() { return `${this.wordNumberString} ${this.wordNumberStr ...

javascript

Utilizing consistent CSS styles across VueJS components

Currently tackling a VueJS 2 project and facing issues with scoped styling when cleaning up the code. My setup involves 3 components that share similarities, prompting me to utilize mixins for consolidating the code into one file. Each component makes use ...

cssvue.jsscopevuejs2mixins

Guide on sending a post request to a PHP component

var table = $('#accessRequest').DataTable({ "dom": 'Blfrtip', "ajax": "Editor-PHP-1.5.1/php/editor-serverside.php", "columns": [ { //special column for detail view ...

javascriptphppostrequest

Using the `ssh2` module in Node.js without specifying a specific object

When you use require('ssh2') in Node.js without a specific object (e.g. require('ssh2').Client), what does it imply? I'm in the process of understanding some code and still new to learning Node.js. Here's how it is being used: ...

javascriptnode.js

Why is ui-view failing to display the associated template in angular-ui-tab?

Can someone help me troubleshoot why ui-view is not working for ui-tab in my code? Here is what I am experiencing: On the customers page, I have a link that redirects to the update customer page when clicked. The link looks like this: http://localhost:300 ...

javascripthtmlangularjs

Using Javascript function with ASP.NET MVC ActionLink

I need help with loading a partial view in a modal popup when clicking on action links. Links: @model IEnumerable<string> <ul> @foreach (var item in Model) { <li> @Html.ActionLink(item, "MyAction", null, new ...

javascriptjqueryasp.net-mvc-4

What are the best ways to implement advanced data filtering in JavaScript?

Is there a way to improve the filtering of data in the ngx-datatable? Currently, I have a filter that only works for the "Name" column. How can I adjust it to filter data from other columns like "id" or "phone" as well? filt ...

javascriptangular

Developing a custom feature with a ListView in nativescript-vue

Currently, I am immersing myself in the world of nativescript-vue and exploring ways to utilize single file components for enhancing the cleanliness of my code. To kickstart this endeavor, I initiated with a straightforward example that showcases beautiful ...

vue.jsnativescript-vue

Issue with Material-UI Dialog Reusable Component: No error messages in console and app remains stable

Here is a component I've created for reusability: import { Dialog, DialogContent, DialogContentText, DialogTitle, Divider, Button, DialogActions, } from "@mui/material"; const Modal = ({ title, subtitle, children, isOpen, hand ...

javascriptreactjsmaterial-ui

The input field is failing to capture the final character entered

Is there a way to store all input files in a single object and use the information in a graph? Currently, when I enter the first character, it creates an empty object, so the last character I enter is not captured in the object. Any suggestions on how to ...

javascriptreactjsjsx

Is it possible to retrieve the createdAt timestamp without displaying the 'GMT+0000 (Coordinated Universal Time)'?

After conducting an extensive search, I have yet to find a satisfactory answer. My goal is to configure it without including the CUT time. {name: "Registered:", value: `${user.createdAt}`}, {name: "Joined:", value: `${message.guild.joinedAt}`} Presently, ...

javascriptnode.jsdiscord.jsreplit

Retrieve JSON information utilizing a specific value stored in the localStorage

After an extensive search online yielded no results, I decided to seek assistance here. This is what I have managed to gather so far: JSON I possess a JSON file containing various lists of words that require retrieval based on user input. The structure ...

javascriptjsonphaser-framework

Integrate geographic data in GeoJSON format into a Leaflet map by using the Django template

In my Django view, I am fetching results of an SQL query and rendering it on the index.html page of my web map. The POST request successfully returns the acreage calculated from the SQL query to the page. I am also attempting to display the geojson data fr ...

javascriptdjangodjango-templatesleafletgeojson