Доступ к глобальной переменной в основном файле с помощью импортированной функции Javascript ES6

Question

Я использую Vue.js но просто JS файлы а не vue файлы, и я импортирую компонент в мой основной app.js вот так:

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

Это импортирует это просто отлично, но я пытаюсь получить доступ к этим глобальным переменным. Прежде чем люди уничтожат меня за использование глобальных переменных, вы можете просто сказать мне, если это возможно.

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

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

Не читает apiRoot или же acfApiRoot внутри этого компонента, включаю ли я его до или после переменных.

Единственный способ это работает, если я объявляю переменные в моем файле компонента autoPosts.js

Answer 1

Просто так app.js Основной модуль не означает, что объявленные в нем переменные становятся глобальными. Но вы все равно не должны использовать глобальные переменные. Вместо этого создайте другой модуль

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

что вы можете импортировать туда, где вам нужны константы:

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

Answer 2

Просто используя

const apiRoot = 'whatever';

не делает его глобальной переменной и недоступен, поскольку не экспортируется.

Чтобы использовать глобальную переменную, добавьте ее в окно;

window.apiRoot = 'whatever';

и он будет доступен из любых других классов с простым именем переменной

console.log(apiRoot); // outputs 'whatever'

Answer 3

Разве это не может использовать окно?

window.apiRoot = location.origin + '/wp-json/wp/v2/';