Assigning a value to a Vuex module variable using getters from another module in Nuxt.js

The Nuxt.js application I am working on involves initializing a variable in a Vuex module that uses Axios in its actions.

store/program.js

let program_url = 'programs/';

export const actions = {
  async programList({commit}) {
    await this.$axios.$get(program_url).then((response) => {
      commit("ALL_PROGRAMS", response);
    });
  },

The challenge I am encountering is that this variable is dependent on a state variable from another Vuex module. I am aiming to create a variable named

program = <dynamic_id_from_another_vuex_module>/program
in store/program.js.

The other Vuex file is store/university.js

export const state = () => ({
  settings: [],
  id: null
});

export const getters = {
  getId(state) {
    return state.id;
  }
};

So, how can I achieve something like the following in my store/program.js?

let program = store.getters['university/getId'] + 'program';

Answer №1

Make sure to utilize the rootState parameter in your getters as shown below...

getId(state, getters, rootState) {
    return rootState.university.id  // In this example, university is considered as a separate module
}

And that’s all there is to it :)

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

The step-by-step guide on passing arguments and fetching results from Angular UI Bootstrap Modal through Components

I am facing a simple scenario where I have defined a modal as a component and opened that modal using `uiModal.open`. However, when I try to pass custom data to the modal using "resolve" in the open method and arguments in the controller constructor, the d ...

What is preventing me from binding ng-click to my element?

I've encountered an issue where the ng-click event is not activating on my element. Despite using the in-line controller script as shown below, I am unable to trigger my alert. Are there any integration issues that I should be mindful of? What could p ...

Is it possible to design a genuinely unique component with MUI?

Is it possible to create a custom MUI component called MyCustomButton that can be tailored using theme configurations, such as setting muiName = 'MyCustomButton'? The desired customization would involve defining styles for the root element and an ...

JsTree drag and drop feature malfunctioning: Icons disappear when dragging items

I am currently utilizing JsTree with the drag and drop plugin enabled in conjunction with an angular directive, https://github.com/ezraroi/ngJsTree. Everything appears to be functioning correctly, however, when I move a node, it does not visually show as ...

Using JavaScript, create a function that accepts an HTML element as a parameter

I have a script with two functions. One function generates a lengthy HTML string, and the other function processes this string as a parameter. function myFirstFunction() { // Generate HTML content return myHTML; } var myHTML = myFirstFunction(); ...

The Jquery Object #<Object> does not have the 'getElement' method available

I've been attempting to set up this table, following the instructions here: Despite verifying that my browser is correctly pulling the CSS and .js files, I keep encountering an error related to my sortabletable.js file. (screenshot of the error) htt ...

I need help converting the "this week" button to a dropdown menu. Can someone assist me in troubleshooting what I am missing?

Seeking assistance with customizing the "this week" button on the free admin dashboard template provided by Bootstrap 4. Looking to turn it into a dropdown feature but unable to achieve success after two days of research and watching tutorials. See code sn ...

Issue with Vue.js input not updating with v-model after input sanitization in watch handler

Recently, while working with Vue 2.6, I came across an unusual issue when trying to sanitize user input. The main culprit seemed to be a custom component that housed the input field. Here's a simplified version of it: <template> <input :na ...

Refresh Next.js on Navigation

Is there a way to trigger a reload when clicking on a Link component from next/link? I attempted to create my own function within the child div of the link that would reload upon click. However, it seems to reload before the route changes and is not succ ...

Is there a way to retrieve random data based on either product id or slug within a single component using useQuery? Currently, all components are displaying the same data

Here is the code I wrote: const fetchCartItem = async () => { if (token) {const {data } = await axios.get(API.GET_PRODUCT_DETAILS_BY_PRODUCT_ID.replace("[ProductID]",item?.ProductID),{headers:{Authorization: token,},});setCartLoading(fal ...

Challenge in Decision Making

I am curious why this type of selection is not functioning properly for html select options, while it works seamlessly for other input types like Radios or checkboxes. Any thoughts? $('#resetlist').click(function() { $('input:select[nam ...

Express JS: The requested resource does not have the 'Access-Control-Allow-Origin' header

Currently, I am encountering an issue with my API running on a server and the front-end client attempting to retrieve data from it. Previously, I successfully resolved the cross-domain problem, but now it seems like something has changed as I am receiving ...

Executing multiple nested $http calls in Angular can significantly slow down the process

Within my angular application, I am currently dealing with 6 to 7 http chaining requests that are taking a significant amount of time to execute. What are some strategies for optimizing this process? empSvc.getallEmp().then(function (data) { if (dat ...

The global variable remains unchanged within an ajax request

Here is the code I am working with: In developing this code, I referenced information about the window variable from here <script> $(window).on("load", function() { function myForeverFunc(){ ...

Loading individual components and directives in Nuxt.js with Bootstrap-Vue

I've been exploring the integration of Bootstrap-Vue library with my Nuxt.js project. Although I referred to the official documentation for guidance, I encountered an issue. While importing bt-vue as a single module was successful, I wanted to optimiz ...

VueJS encountered an error: listen EADDRNOTAVAIL, indicating that the address is not available

I am a beginner in JavaScript. Recently, I started learning about Vue.js with Vue-CLI 2. However, now I want to upgrade to the latest version of Vue-CLI, which is 4.3.0. I followed a step-by-step tutorial to install it, but when I try to run npm run serve, ...

Protecting website pages on both the admin and user side in Next.js 14 to ensure maximum security

I'm currently using nextjs 14 and I am working on developing a website similar to a property app. It will have an admin dashboard and a user side. How can I ensure the security of both the admin and user sides, and what should my folder structure look ...

Deployment to Amazon Amplify encounters failure when using Next JS

I've been encountering continuous failures while trying to deploy an SSG app on Next JS. The build consistently fails, and I'm met with an error message. Despite following the deployment documentation for SSG sites on Amazon diligently, the error ...

Struggling to use the innerHTML method to update a div within another div element?

<!DOCTYPE html> <html> <head> <title>Business Information Card</title> <script type="text/javascript"> window.onload = init; function init(){ var button = document.getElementById("populate ...

Angular directive ng-if on a certain path

Is it possible to display a specific div based on the route being viewed? I have a universal header and footer, but I want to hide something in the header when on the / route. <body> <header> <section ng-if=""></section&g ...