私は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
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';
…
ウィンドウは使えませんか?
window.apiRoot = location.Origin + '/wp-json/wp/v2/';
ただ使う
const apiRoot = 'whatever';
エクスポートされないため、グローバル変数にならず、アクセスできません。
グローバル変数を使用するには、それをウィンドウに追加します。
window.apiRoot = 'whatever';
簡単な変数名で他のクラスからアクセスできます
console.log(apiRoot); // outputs 'whatever'