Доступ к глобальной переменной в основном файле с помощью импортированной функции 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

просто использование

const apiRoot = 'whatever';

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

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

window.apiRoot = 'whatever';

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

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

Answer 2

Тот факт, что 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 3

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

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