web-dev-qa-db-fra.com

Accéder à une variable globale dans le fichier principal avec une fonction Javascript importée ES6

J'utilise Vue.js Mais avec simplement des fichiers JS et non des fichiers vue et j'importe un composant dans mon app.js Principal comme ceci:

import autoPosts from './components/autoPosts.js';

Il l'importe très bien, mais j'essaie d'accéder à ces globaux. Avant que les gens ne me détruisent pour avoir utilisé des variables globales, pouvez-vous simplement me dire si cela est possible.

const apiRoot    = location.Origin + '/wp-json/wp/v2/';
const acfApiRoot = location.Origin + '/wp-json/acf/v3/';

import autoPosts from './components/autoPosts.js';

Il ne lit pas apiRoot ou acfApiRoot dans ce composant, que je l'inclue avant ou après les variables.

La seule façon dont cela fonctionne est de déclarer les variables dans mon fichier de composants autoPosts.js

javascriptecmascript-6vuejs2javascript-import
7
Nate Beers

Tout simplement parce que app.js est le module principal ne signifie pas que les variables qui y sont déclarées deviennent globales. Mais vous ne devez pas utiliser les variables globales de toute façon. Au lieu de cela, créez un autre module

// config.js
export const apiRoot    = location.Origin + '/wp-json/wp/v2/';
export const acfApiRoot = location.Origin + '/wp-json/acf/v3/';

que vous pouvez importer où vous avez besoin des constantes:

// components/autoPosts.js
import { apiRoot, acfApiRoot } from '/config.js';
…
10
Bergi

Ne peut-il pas utiliser de fenêtre?

window.apiRoot = location.Origin + '/wp-json/wp/v2/';
2
RyanA91

juste en utilisant

const apiRoot = 'whatever';

n'en fait pas une variable globale et n'est pas accessible car il n'est pas exporté.

Pour utiliser une variable globale, ajoutez-la à la fenêtre;

window.apiRoot = 'whatever';

et il sera accessible à partir de toutes les autres classes avec un simple nom de variable

console.log(apiRoot); // outputs 'whatever'
1
Georgios Dimitriadis