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

它不能使用窗口吗？

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

Answer 3

仅使用

const apiRoot = 'whatever';

不会将其设为全局变量，并且由于无法导出而无法访问。

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

window.apiRoot = 'whatever';

，并且可以从其他任何类中使用简单的变量名进行访问

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

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

3 个答案: