使用导入的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'