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

How can state be efficiently communicated from a parent component to a child component in React?

As I embark on my first React project, I have encountered a recurring issue that has left me scratching my head. Whenever I pass state to a child component within an empty-dependency useEffect and then update the state, the child fails to reflect those cha ...

javascriptreactjs

Exploring the Possibilities of Message Embeds in Discord using JavaScript

My goal is to teach my bot how to scan the description of embeds for a specific phrase. After reviewing the documentation at https://discord.js.org/#/docs/main/v11/class/MessageEmbed?scrollTo=description, it appears that I need to implement code similar to ...

javascriptdiscord.js

Utilize Content Delivery Network Components in Conjunction with a Command Line Interface Build

As we progress in building our Vue applications, we have been using the standard script tag include method for Vue. However, as we transition from jQuery/Knockout-heavy apps to more complex ones, the maintenance issues that may arise if we don't switc ...

javascriptwebpackvue.jsvuejs2

Get and show the response from a jQuery GET call

I'm currently working on fetching and displaying data using the ESV API available at Interestingly, the code seems to be functioning properly within the codecademy.com domain but is encountering issues on the esvapi.org domain. Here's a lin ...

javascriptjqueryajaxapiget

Ways to eliminate brackets from a string

Currently, I am working on a challenge involving replacing strings using a function that accepts a string and an object of values. This task involves a two-part algorithm: Replacing values within the string that are enclosed in braces. If the value is wi ...

javascriptstringalgorithmreplace

How can I retrieve the height of a dynamically generated div in Angular and pass it to a sibling component?

My setup consists of a single parent component and 2 child components structured as follows: Parent-component.html <child-component-1 [id]="id"></child-component-1> <child-component-2></child-component-2> The child-compo ...

javascriptangulartypescripttwitter-bootstrapng-bootstrap

Having issues with connecting the front-end (Vue) to the API (Node.js), utilizing nginx on an EC2 AWS instance running Ubuntu 20.04

I am currently in the process of setting up web servers. Initially, I decided to use NodeJS with Express for backend, specifically listening on port 3002. app.js is now successfully listening at port 3002 Subsequently, I configured the Ubuntu firewall to ...

node.jsamazon-web-servicesvue.jsnginxaxios

Display the selection order in the index for multiple items in the Vuetify component v-select

Hey everyone, I'm new to Vue.js and I've encountered a roadblock with a basic issue. I created a multiple v-select (Vuetify component) that allows users to select one or more items from a list. <v-select dark class="mb- ...

vue.jsuser-interfaceindexingvuetify.jsv-select

When using the Infinite Scroll React component, only a single new set of objects is loaded as you scroll down, and the loading

My React component is designed to load 6 images at a time as the page is scrolled down, creating an infinite scroll effect similar to what YouTube and Reddit now use. Currently, when the page loads, it shows the initial 6 images correctly. However, as I c ...

javascriptreactjsnpm

Incorporate a widget with dynamic height adjustment

We are currently working on creating a widget that can be easily embedded by third-party websites. Our goal is to have the widget automatically adjust its height through the embed script. Initially, we considered using an IFrame generated by our JavaScrip ...

javascriptjqueryhtmlembed

Is there a way for me to customize the footer of the modal in Vue CoreUI?

I recently came across some code in the coreui vue template that looks like this: <b-modal title="Modal title" class="modal-success" v-model="successModal" @ok="successModal = false" ok-variant="success"> Lorem ipsum dolor sit amet, consectetur adip ...

vue.jscore-ui

Adapt appearance according to the length of the text

Currently, I have an array that stores multiple strings based on displayed charts. My objective is to find the longest string within this array. So far, this task has been executed without any issues. The code snippet for this process is as follows: var ...

javascriptjquerycssstyles

Iterate over a collection of HTML elements to assign a specific class to one element and a different class to the remaining elements

Forgive me if this is a silly question, but I have a function named selectFace(face); The idea is that when an item is clicked, it should add one class to that item and another class to all the other items. This is what I currently have: HTML <div c ...

javascriptangulartypescript

Changes to the model cannot be realized unless $scope.$apply is used

Are there alternative methods to achieve the desired model change without utilizing $scope injection in an Angular "controller as" approach within the given setup? The HTML: <div data-ng-controller="Buildings as vm"> <select data-ng-model="vm. ...

javascriptangularjs

Incorporate npm libraries into vanilla JavaScript for HTML pages

Attempting to incorporate an npm package into plain JS/HTML served using Python and Flask. <script type="module"> import { configureChains, createClient } from "./node_modules/@wagmi/core"; import { bsc } from "./nod ...

javascripthtmlnpm

Passing a custom Vue component as a property to a parent component

Struggling to find answers to my unique question, I'm attempting to create an interface where users can drag or input images using Vue. I've developed a component called Card, which combines Vue and Bulma to create card-like objects with props fo ...

javascriptvue.jsvuejs2

Leveraging the AngularJS promise/defer feature alongside the Quickblox framework, learn how to efficiently upload images and subsequently upload public URLs to a custom

I am currently developing an application that requires users to upload 5 images of themselves. Using a backend-as-a-service platform like Quickblox, I have to create and upload blob files individually. Once each image is uploaded, I receive a success call ...

javascriptangularjsquickbloxangular-promise

Leveraging the Nest JS Validation Pipe in combination with the class-transformer to retrieve kebab-case query parameters

Can someone help me with using the Nest JS Validation Pipe to automatically transform and validate my GET Request Query Params? For example: {{url}}/path?param-one=value&param-two=value In my app.module.ts, I have included the following code to impl ...

javascripttypescriptnestjsclass-validatorclass-transformer

Implementing v-once with v-bind:class in vue.js: A step-by-step guide

When working with Vue, I came across the following code snippet: <button v-bind:class="['mdc-tab', {'mdc-tab--active' : index===tabs.currentTab}]"></button> The issue is that this binds it to the tabs.currentTab variables, ...

vue.jsvuejs2

Using Firebase Realtime Database, this React dropdown menu is populated with options in real-time. Combining the features

I'm currently facing an issue with a dropdown that is supposed to loop through data fetched from the Firebase realtime database. The goal is to assign a selected value to a Formik form for saving it to another object in the database. In my database, ...

javascriptreactjsfirebasematerial-uiformik