Using the Presentational - Container (or Smart - Dumb) component approach in conjunction with Vuex

When it comes to managing the Presentational - Container (or Smart - Dumb) component pattern with Vuex, what is your recommended approach? Should the Presentational (or Dumb) components emit events to the parent or call Vuex actions? Imagine a scenario where a Container (or Smart) component contains numerous nested Presentational components. Dealing with nested event emissions (e.g., 4 levels deep) can be challenging and lead to repetitive code. However, having a Presentational component directly call actions may not align with the intended purpose of being presentational. Have you considered using an event bus as an alternative solution? While this approach may not be commonly recommended, I am curious to hear your insights and suggestions on handling this situation effectively.

Answer №1

My suggestion would be to keep it simple and not overcomplicate things:) For a shallow nesting level, I would suggest sending events from the Presentational component. However, if the nesting is deeper, it's advisable to call a Vuex action.

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

Inquiries regarding vue-router and the addition of routes

Main javascript file: import Vue from 'vue' import App from './App.vue' import router, { initLayout } from './router' import store from './store' require('../mock/index') Vue.config.productionTip = false ...

ng-model in html input with a name of "foo[]"

Apologies for the lack of a more specific title. In HTML, when we need multiple values for a given name, we utilize the name="foo[]" attribute. Upon posting the data, it arrives as an array. I am seeking this same functionality with ng-model in Angular. ...

Designing a query feature to explore a Sequel Database utilizing a 'RETRIEVE' approach

In my index.erb, I've created a search bar with the following code: <nav> <div class="nav-wrapper"> <form> <div class="input-field"> <input id="search" type="search" placeholder="Search..." required> ...

After the AJAX request, $this experienced a loss of focus

I am facing an issue with my CakePHP code snippet below: <tr class="tr_clone"> <td><?php echo $this->Form->input('items][',array('label'=>false,'options'=>$items,'class'=>'it ...

Trouble with recognizing nested functions when calling them in an onClick event

Encountering a `not defined` error on the console when attempting to call nested functions with an `onClick` event in an HTML page. After searching for solutions without success, I suspect it may be a scope or closure issue, but I am unsure of how to addre ...

Executing a function in ExpressJS at regular intervals of 24 hours

Can someone share the most effective method to schedule an automated task every 24 hours in ExpressJS? I have thoroughly researched possible solutions but haven't found any option other than using an infinite loop. Is there only one way to achieve th ...

Does Vue trigger v-bind when referring to a component?

My upload component is set up to submit after a message has been sent. Within this component, there is an action that specifies the request URL using v-bind. However, I've noticed that whenever I try to access the reference, the v-bind does not seem t ...

Using Vue.js to build Chrome extensions

Is vuejs suitable for creating chrome extensions? I have experience with react and redux, but now I'm looking to explore something different. Although there isn't much information available, I am curious about how I can leverage vue components al ...

Why isn't my JavaScript Alert displaying a string message?

I'm feeling a bit puzzled and I have a feeling there must be an easy solution, so please lend me a hand. Here's the code snippet that is causing me some confusion: $new = "1"; <script language="javascript"> alert(<?php echo $new; ...

Utilizing async await in a JavaScript event: A guide

I have coded the introduction page for my game, which includes a submit button and a textbox for users to input their username. Upon pressing the submit button, the code posts the name into a JSON file and retrieves all the data from the JSON file to sen ...

In JavaScript, the Else statement fails to run

Hi there, I'm currently working on creating a function to check the validity of a string input. This is what I have so far: function validatePassword(){ passW = prompt ("Enter Password:"); if (passW == 'Pass123'){ document.write ('Y ...

The Ultimate Guide to Initializing Variables in UI Router State Access

In my application, I have defined 2 states. One is "tickets" which matches /tickets ... $stateProvider // defines the states of my application .state("tickets", { // assigns properties to each state url: "/tickets", // route templateUrl: "m ...

What is the proper method for transforming an Excel column containing JSON format data into a JavaScript object?

I am facing an issue with converting data from an excel sheet to json format. While the other columns convert successfully, one specific column containing json data is not being converted properly and instead gets treated as a string. Using JSON.parse() on ...

onChange does not trigger useEffect

In the Order Content component, I am receiving some products as props to be used in a select component. When a product is selected in the dropdown, it triggers the rendering of Summary and Product components. In these components, the user can choose the ...

Node.js PDFKit Measurement Units

Can you clarify the measurement unit used in PDFKit (Node.js)? For example, we have: doc.text(20, 20, 'Message') What exactly does 20(x) and 20(x) represent? Are they measured in centimeters, millimeters, inches, or something else? Can I conver ...

Generating fresh objects to establish a Many-to-Many connection with Sequelize

I am currently utilizing NodeJS, Express, Sequelize, and PostgreSQL in my project. Within my application, I have defined two models: a "User" model and a "Social" model. My goal is to establish a many-to-many relationship where a user can be associated wi ...

Utilizing useEffect in the header component of ReactJS/Next.js: A Comprehensive Guide

In my next.js/react project, I have a component called header.js that is included on every page. Within this component, I've implemented a typewriter effect with rotation by using the following code snippet inside useEffect: export default function H ...

Is there a way to automatically close the Foundation topbar menu when a link is selected?

On my single page website, I am utilizing Zurb Foundation's fixed topbar which includes anchor links to different sections of the page. My goal is to have the mobile menu close automatically whenever a link inside it is clicked. As it stands now, whe ...

A step-by-step guide on upgrading or transferring from Vite 2 to Vite 3 using NPM while harnessing the power of Vue

While it may seem like a straightforward question, I found myself unable to locate the specific process or commands for upgrading from Vite 2 to Vite 3 using npm. Despite reading the announcement and the migration guide (along with other resources), I ha ...

Ensure that a synchronous action is performed prior to each Backbone HTTP request

For each authenticated request (GET, POST, etc) in my Backbone/Marionette application, it is necessary to include an accessToken. The accessToken and expireDate are stored in the localStorage. To verify if the accessToken has expired, I utilize the metho ...