Here’s a guide on accessing variable values from different JavaScript files in Nuxt.js

Question

Here’s a guide on accessing variable values from different JavaScript files in Nuxt.js

In my Nuxt.js project, I organized the file directories as follows:

/* Create a axios instance with custom headers */
import axios from 'axios';

let myVariable = someVariable //someVariable is the result from    // asynchronous 
//request with axios in some web page component, how can I get 
// variable?
// with vuex?

const myAxios = axios.create({
     headers: {'X-My-Variable': myVariable}
});

export default myAxios;

A web page component fetches a result from an asynchronous request, and I want to use this result in another JavaScript file or third-party library. Where should I store the result of the asynchronous request, and how can I access it regardless of changes in the route?

javascript vue.js axios vuex nuxt.js

Answer 1

Answer №1

To start off, make sure to export the variable like so:

/* Creating an axios instance with customized headers */
import axios from 'axios';

export let myVariable = someVariable
//^^^^ -- included

// ... (everything else remains unchanged)

Then, you can easily import it in any other part of your code whenever necessary:

// importing from a file located at pages/foo.js
import { myVariable } from '../axiosUtility';

Answer 2

To start off, make sure to export the variable like so:

/* Creating an axios instance with customized headers */
import axios from 'axios';

export let myVariable = someVariable
//^^^^ -- included

// ... (everything else remains unchanged)

Then, you can easily import it in any other part of your code whenever necessary:

// importing from a file located at pages/foo.js
import { myVariable } from '../axiosUtility';

Here’s a guide on accessing variable values from different JavaScript files in Nuxt.js

Answer №1

Similar questions

Is there a way to send both a List and an Integer from C# to Javascript?

Error: No targets with the name "taskname" were found for the custom Grunt task

Is there a way to assign a preset value to an HTMX prompt?

Forward to a different page after sending an ajax request

Origin Access Control - Failing to Function

Encountering issues when implementing react-router with the client-side library

Uploading multiple images using Cordova's File Transfer feature

Ensuring the child div's height does not overflow beyond the parent div

Invoke a function from a different vue.js component using the this.$refs property

Aligning text using Javascript and dynamically resizing it with css3 viewport causes a choppy effect when adjusting the size

Encountered an issue while executing the command (domain=com.apple.CoreSimulator.SimError, code=403):

The content is spilling over onto the navigation bar

A guide on invoking an asynchronous function within the useEffect() hook in React

Is there a way to ensure that the div of my template spans 100% in width and height?

Show information in a table based on a unique identifier

Guide to correctly passing custom parameters along with the event object to an asynchronous form submission handler

Using React Router (version 4) - navigating backwards in your application

What is the best way to establish a default selection in Angular?

A server-side rendered page in Next.js that functions without the need

having difficulty transmitting parameter to angular directive