"Utilizing Vuex for a detailed and structured approach to organization

Currently, I am tackling a rather extensive project and my aim is to divide Vuex modules into as many segments as feasible. Specifically, I intend to segregate the API functionality from the UI, maintaining a clear distinction between server-sourced data and component markers.

While reviewing the documentation (http://vuex.vuejs.org/en/structure.html), it suggests organizing everything into separate modules, which is quite beneficial. However, confusion arises when there are both a page for 'products' and actual data representing 'products', requiring them to be kept distinct.

Is it viable to accomplish something along these lines:

{
  modules: {
    api: {
      products: // ...
    },
    pages: {
      products: // ...
    }
  }
}

Furthermore, would accessing them via store.api.products and store.pages.products be possible? Am I misunderstanding something here?

Thank you!

javascriptarchitecturevue.jsvuex

Answer №1

After analyzing the vuex code, I stumbled upon this interesting piece:

// retrieve nested modules
const nestedMutations = this._createModuleMutations(module.modules, newNestedKeys)

I discovered a way to create more granular vuex modules by structuring them like this:

{
  modules: {
    api: {
      modules: {
        products: /* ... */
      }
    },
    components: {
      modules: {
        page: /* ... */
      }
    }
  }
}

This approach will lead to a state structure similar to the one depicted in the following image link:

https://i.sstatic.net/Gnbfz.png

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

Juggling numerous pages in a React application

Our application is primarily flask/python based, with flask handling everything from user sessions to URLs. We are currently in the process of developing a UI component for our application using reactjs. We have successfully built the react bundle (bundle ...

javascriptpythonreactjsflask

Exploring the benefits of utilizing express-session for authentication management

I am currently in the process of creating a basic login application using express 4 and express-session. When setting up my code as follows: app.use(session({ store: new MongoStore({ db: 'sess' }), secret: 'Ninja Turtle', cookie ...

javascriptnode.jssessionexpress

simulated xhr server along with the locales in polymer appLocalizeBehavior

Currently, I am in the process of developing a web frontend utilizing Polymer. Within my web component, I incorporate various other components such as paper-input or custom web components. To facilitate testing for demonstration purposes, I have integrated ...

javascriptjsonpolymersinoniron-ajax

Cannot Display CSS Background Image Locally

Apologies for the simple inquiry, but I am facing an issue with displaying my background image using background-image:url() in the CSS. Strangely, it does not work with this method, but when I use content:url(); it works just fine. Interestingly, backgrou ...

javascripthtmlcss

Errors occurred when trying to use Jquery to handle a JSON response

enter code here function customPaging(action, action1, page) { alert("in customPaging"); $.getJSON("./paging.do?action="+escape(action)+"&p="+escape(action1)+"&str="+escape(page), function(data){ alert("Length: "+data.length); var options = ...

javajavascriptjqueryajaxjson

Show JSON data as choices in a dropdown menu

On my webpage, I want to display a dropdown list populated with objects from a JSON file using JavaScript. Here is the structure of my HTML and JSON: HTML <html> <body> <select id="myid">MyList</select> <script src="m ...

javascripthtmljsonhtml-select

What causes the issue of undefined destructured environment variables in Next.js?

Within my application built with Next.js, I have configured a .env file containing a variable labeled API_KEY. When attempting to destructure the value of this variable, I am consistently met with undefined, as shown below: const { API_KEY } = process.env ...

javascriptnode.jsenvironment-variablesnext.js

Guide on transmitting data between NextJS and MongoDB

I'm facing an issue where the data from a form is being sent to MongoDB as undefined using nextJS and MongoDB. NewPlayerPage component: const newPlayerPage = (props) => { console.log('props: ' + props); const handleAddPlayer = a ...

javascriptreactjsmongodbnext.js

Retrieve class property in Angular by its name

How can I retrieve an array from a class like the one below without using a switch statement, dictionary, or other collection to look up the name passed into the method? export class ProcessOptions { Arm = [{ name: 'Expedited Review ("ER") ...

javascriptangulartypescript

"Troubleshooting the issue with the @click event failing to update the data

Working in Vue.js, my v-for loop is set up to go through a list and generate buttons. Each button has a click event that should change the value of upUrl to its index: <div class="mt-3" v-for="(buttonPic, index) in buttonPics" ...

javascriptvue.jsvuejs2vue-component

My draggable item seems stuck in place. Any ideas on how to get it moving again?

I have been trying to implement some code I found on this link. Despite adding all the necessary file links, the code is not functioning as expected. It should be able to move within the bounds of a container, but it's not working properly. var max ...

javascripthtmljquerycssjquery-ui-draggable

Angular directive preventing default action but Chrome still loading image on drag

Has anyone encountered an issue with an angular directive that is not successfully preventing Chrome's default action? Below is the code for the directive in question: app.directive('fileDrag', function () { return { restrict: ' ...

javascriptangularjsgoogle-chrome

Guide on exporting a submodule within a TypeScript package

My aspiration is to develop a Typescript library that emulates the structure of popular libraries like RxJS and Angular Material, which are divided into submodules. RxJS and Angular exhibit a way to import features using syntax like this: // RxJS import ...

javascripttypescriptecmascript-6

Submitting forms from a different router in React can pose a unique challenge

As a beginner in React, I am working on creating a simple meal app. In my App component, I am fetching meal data from an api and allowing users to click on a meal for more details. However, I am facing an issue where searching for a new meal on the detail ...

javascriptreactjs

Incorporate the coordinates of Google Maps markers into your form submission

After a user clicks a position on the map, the following javascript function retrieves a javascript variable named marker containing coordinates. var marker; function placeMarker(location) { if ( marker ) { marker.setPosition(location); } else { ...

javascriptlaravelgoogle-mapsbootstrap-4

What is the correct way to chain custom callback functions using .queue()?

I am currently grappling with the concept of chaining custom functions: My code snippet looks like this: show_loader(0, function() { open_box($target_open, event.value, '.wide-col', function() { hide_loader(function() { ...

javascriptjqueryajaxqueue

How about I visit the campgrounds/edit page for a change?

In this get route, the previous link it was redirected from is stored in the req.session object under returnTo. Once redirected, it goes to the /login and we are able to view the object in the console. router.get('/login', (req, res) => { ...

javascriptnode.jsexpresspassport.js

What is the best way to assign a return value to a variable in JavaScript?

var robotDeparture = "The robot has set off to buy milk!" var farewellRobot = return robotDeparture; I'm attempting to show the content of the robotLeaves variable using a return statement. Furthermore, I intend to assign this return statement to a v ...

javascriptreturnvar

Update the button functionality according to the button's unique identifier

I am trying to dynamically change the button's redirect link based on its ID in my NEXT.JS project, but as a newcomer to this framework, I am unsure of how to accomplish it. I understand that this modification should be done after rendering, possibly ...

javascripthtmldomswitch-statementnext.js

Looking to alter the appearance of a div within an iframe by matching it with the title of the parent window using javascript?

I am currently working on a parent page titled Criatweb, which contains an iframe page. My goal is to modify the display of a specific div within the iframe page only when its title matches Criatweb. I attempted to implement the following script within t ...

javascripthtmliframe