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

可以不用window吗？

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

Answer 2

刚刚使用

const apiRoot = 'whatever';

不会使其成为全局变量并且不可访问，因为它未导出。

要使用全局变量，请将其添加到 window；

window.apiRoot = 'whatever';

并且可以通过简单的变量名

从任何其他类访问它

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

Answer 3

仅仅因为 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';
…

使用导入的 Javascript 函数访问主文件中的全局变量 ES6

Access a Global Variable in Main File with an Imported Javascript Function ES6

javascript

ecmascript-6

vuejs2

javascript-import