如何在多個文件之間共享全局變量？

Question

我有兩個文件都需要一個全局變量。 我有一個點擊按鈕。 當它被點擊時，運行一個函數。 代碼如下所示：

文件 1：

var globalVar = '', // The global variable

<button onClick = {() => this.edit(arg1)}></button>
function edit (arg1){

   globalVar = arg1;
}

module.exports = globalVar;

我有另一個文件，看起來像這樣：

文件2：

var globalVar = require(./file1);

function openModal(){

if (globarVar != ''){
 do something

} }

問題是，當我單擊按鈕時，在 edit() 函數中更新 globalVar，但我在 file2 中的 console.log(globalVar) 它顯示 ' '。我的問題是當我單擊時如何將 globalVar 傳遞給 file2按鈕？

Answer 1

如果您真的想要一個全局變量（當然不建議這樣做），那么您始終可以 100% 自由地做

window.globalVar = 0;

在您的任何模塊中。

---

更強大的解決方案當然是讓這個全局變量位於某種專用模塊中，比如

全局變量.js

export default {
    value: 0
};

然后你可以

import globalVal from './globalVar';

globalVal.value = 'whatever';

從任何需要的模塊。

唯一的風險是，如果您進行代碼拆分，webpack 可能會將這個相同的“全局”值復制到多個包中，具體取決於您的設置。 所以單獨的模塊將使用他們自己的這個非全局變量的本地副本。 編輯- 這不是真的。 webpack 從來沒有這樣做過； 該評論是基於我的誤解。