web-dev-qa-db-ja.com

インポートされたJavaScript関数ES6を使用してメインファイルのグローバル変数にアクセスする

私は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

javascriptecmascript-6vuejs2javascript-import
7
Nate Beers

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';
…
10
Bergi

ウィンドウは使えませんか？

window.apiRoot = location.Origin + '/wp-json/wp/v2/';
2
RyanA91

ただ使う

const apiRoot = 'whatever';

エクスポートされないため、グローバル変数にならず、アクセスできません。

グローバル変数を使用するには、それをウィンドウに追加します。

window.apiRoot = 'whatever';

簡単な変数名で他のクラスからアクセスできます

console.log(apiRoot); // outputs 'whatever'
1
Georgios Dimitriadis