Organizing a Vue.js SPA project: Implementing Vuex store and API calls efficiently

Here is how I have organized the structure of my Vue app:

components/
    article/
        AppList.vue
    common/
        AppObserver.vue
        NoSSR.vue
    layout/
        AppFooter.vue
        AppHeader.vue                
    ui/
        AppButton.vue
        AppList.vue
pages/
    ArticlePage/
        index.vue
        ArticleTitle.vue
        LastArticlesSection.vue
    UserPage.vue
        ....

I am curious about best practices when it comes to using the Vuex store and calling APIs. Should I only do this from the index.vue file of the pages, passing necessary data to children components via props? Or would it be better to use the store and APIs in other components like AppList.vue, which is a common component used across multiple pages?

javascriptvue.jsvuejs2vuex

Answer №1

Vuex serves the purpose of separating unrelated components, allowing them to directly access global data that extends beyond their parent's scope. Evidence of this can be found in helper methods like mapState, which would otherwise serve no purpose. In cases where components are closely related to their parent, using props may be more appropriate.

Importing APIs into Vuex is also a common practice and is perfectly acceptable.

Vuex excels in:

  • Sharing data among multiple components
  • Centralizing APIs for easy access across different components

Vuex may not be ideal for:

  • Simple data requirements that can easily be handled with props
  • Situations where persistent data management is unnecessary

Quoted from the official documentation

If you find yourself grappling with state management in medium-to-large scale single-page applications, Vuex is likely the logical next step for you.

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

I am eager to retrieve the outcome once all the queries have been completed within the loop (using express.js, react.js, and MySQL)

Currently, I am engaged in a personal project that involves using React and Express. The task at hand is to retrieve data spanning 7 days for a specific item from my database and present it in a search list. To achieve this, I attempted the following: U ...

javascriptmysqlnode.jsreactjsexpress

What is the best way to implement asynchronous image loading on hover events in React.js?

You may have come across this type of effect before. A good example can be found here - https://codepen.io/anon/pen/GEmOQy However, I am looking to achieve the same effect in React. While I understand that I can use the componentDidMount method for AJAX c ...

javascriptajaxreactjs

Tips on deleting specific elements from an array by utilizing the splice method

Here are the details of my first array: [ { members: [ '60ee9148104cc81bec3b97ab' ] } ] And this is the second array: [{"_id": "60ee9148104cc81bec3b97ab","username": "user1", "email": "< ...

javascriptnode.jsexpress

Unable to locate module with React and Material-UI integration

When attempting to implement a Material button in my React app, I encountered the following error: Failed to compile. ./node_modules/@material-ui/core/styles/index.js Module not found: Can't resolve '/Users/hugovillalobos/Documents/Code/Lumiere ...

javascriptreactjsmaterial-ui

Utilizing modal functionality for seamless integration of new data into mui-datatable

When trying to add a new data entry using a modal box, I encountered an issue where the new data was not being added to the datatable. Is there a solution for this problem? Below is the code snippet I used: let id = 0; function createData(name, provider) ...

javascriptreactjsmaterial-uimui-datatable

``I am experiencing slow loading times with Google Maps JS when using

When accessing Google Maps on Safari, zooming in can be frustratingly slow on both Windows and Mac. The experience feels glitchy, with the zoom starting, freezing, then finally finishing. In comparison, Chrome provides a much smoother and faster zooming ex ...

javascriptiosgoogle-mapssafari

Error in refreshing JWPlayer page: Plugin loading failure - File not located

I'm implementing JWPlayer on my Localhost environment. Here's the code snippet I'm using: <div id="Player">loading...</div> <script type="text/javascript"> jwplayer("Player").setup({ file: "<?php echo $video[' ...

phpjavascriptjqueryjwplayer

receiving a pair of components instead of just one

Here is the code for router.js: import React from 'react'; import { Route } from 'react-router-dom'; import CommentList from './containers/commentview'; import CommentDetalList from './containers/commentdetailview'; ...

javascriptnode.jsreactjsreact-router-dom

Menu icon in Next.js/React/Tailwind not triggering close action when clicked again, causing responsiveness issue

Hey there, I'm relatively new to working with Next.js and React. Right now, I'm tackling the challenge of creating a responsive navbar that toggles open and closed when clicking on the hamburger icon (and should also close when clicked outside th ...

javascriptreactjsnext.jstailwind-cssresponsive-navigation

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

I have a scrollable container for displaying messages. I would like to apply an opacity of 0.5 to the content in the top 30% of the container, as shown in this image: https://i.stack.imgur.com/NHlBN.png. However, when I tried using a background div with a ...

javascripthtmlcssreactjs

When attempting to click on my subtopics using jQuery, they do not appear as expected

$(document).ready(function () { $("#subTopics").hide(); $("#mainTopics").click(function () { $("#subTopics").show("slow"); }); }); body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-d ...

javascriptjqueryhtmlcss

Fixes the React bug that removes only the last item in a list

I've been encountering an issue with my list of generated items. Whenever I attempt to remove one using the handleDelete callback onClick function, it always ends up removing the last item instead. Even though I added keys to each item, the removal pr ...

javascriptreactjsmaterial-uinext.js

Organizing the dropdown menu in alphabetical order

I am facing an issue with the following element <li id="li_15" class="dropdown dropdown-alpha highlighted" style=""> <label class="description" for="element_15">Name <span id="required_15" class="required">*</span></labe ...

javascriptjquerysorting

Ways to turn off default browser tooltip using bootstrap4 tooltip

Check out the code below, which demonstrates displaying both the bootstrap tooltip and the native title-attribute tooltip: This is an example of text with a tooltip using Font Awesome icon: <i class="far fa-question-circle" data-toggle="tooltip" title= ...

javascripthtmlbootstrap-4font-awesome-5

Utilizing JavaScript to Extract JSON Information from Knockout.js

Incorporating knockout into my project has been a great help as I retrieve JSON objects using Ajax. One question that arises is how to effectively utilize this data in my custom JavaScript code: After receiving the mapped item from the ajax call, here is ...

javascriptjsonasp.net-mvcknockout.js

Issues encountered while trying to access a child state using Ionic and UI-Router

My current setup includes the following parent states: // Abstract state for tabs directive .state('tab', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html", controller: "TabCtrl" }) // Each tab has its ow ...

javascriptangularjsangular-ui-routerionic-framework

An approach to looping through arrays within an object in JavaScript

I have a JSON structure that consists of an array containing arrays, each holding dictionary elements. This data is retrieved from a function-based view. I am looking to iterate through all the elements and filter out arrays with empty dictionaries. data. ...

javascriptjqueryarraysjson

Error encountered in Webpack configuration while using html-webpack-plugin to generate index.html file

I've been experimenting with webpack to bundle project JS files. My goal is to generate an index.html file under the output dist folder using webpack. To achieve this, I followed the instructions provided in the webpack documentation and installed "h ...

javascriptnpmwebpackwebpack-dev-serverhtml-webpack-plugin

Continue running web AJAX request in Android browser while it is minimized

I need help with my AJAX call var tid = setInterval(mycode, 2000); function mycode() { $.ajax({ url:'/ajx.php', type: "GET", success: function (data) { }, ...

javascriptandroidajax

Facing issues with ng-options duplication?

I have provided the code below that I would like to display: $scope.states="India"; $scope.cities="Madhya Pradesh"; $scope.city="Ajmer"; When attempting to implement this in a cascading dropdown format, I encountered an error. You can find my jsfidd ...

javascriptjqueryangularjs