我想要定義乙個變數, 在專案的任何地方都可以訪問到, 不需要每一次使用的時候, 都引入.
嘗試1:
建立 global.js 並且在其中定義
let a = 10;
在入口檔案中引入 global.js
import './global.js'
在專案中使用:
a // 報錯
發現報錯了, a 並沒有定義. 為什麼?
這個涉及到模組作用域:
1 每乙個 js 都相當於乙個模組, 乙個模組有自己的模組作用域.
意思就是說: 其中的變數方法, 都只在這個模組上面生效.
嘗試2:
將變數放到 vue.prototype 上面, 通過外掛程式全域性引入
建立 global.js, 這樣寫:
let a = 10;
export default
}
在 入口檔案中引入:
import g from './global'
vue.use(g);
在專案中使用:
this.$a
的確可以, 但是這樣的方式並不好, 在任何 this 不指向 vue 的地方, 你都沒有辦法使用這個變數.
嘗試3:
將變數放到 window 物件上面
建立 global.js
window.a = 10;
在入口檔案中引入
import './global.js'
在專案中使用:
a
可行, 這種方式只要你能訪問到 window 物件, 就能訪問到這個變數.
有什麼缺點嗎?
暫時沒有發現.
global.js
可以很明顯的看到, 一旦你要定義的變數或者常量過多, 就能瘋了.
所以我們希望有一種方式, 我們定義還是按照自己的方式定義:
然後有乙個方法fn, 可以將這兩個引數, 直接繫結到 window 物件上面
實現:你需要傳遞乙個物件給方法 fn, fn 負責將這個物件中的每乙個 key 都繫結到 window 物件上面.
let bindtoglobal = obj =>
}
更新版本:
你這樣用之後, 所有的變數/常量都繫結在 window 物件上面, 很容易就和已經存在 window 物件上面的變數
衝突, 所以要收斂你的行為, 這樣:
你先在window 物件上面設定乙個屬性, 屬性值是乙個物件, 比如這樣:
window.key = {};
然後將你所有需要設定的全域性變數, 方法, 都放到 window.key 裡面而不是 window 上面.
let bindtoglobal = obj => ;
for (let key in obj)
}
更近一步, 可以讓這個 key 的名字為 _const 或者 _var, 或者讓使用者自己控制這個變數的名字.
let bindtoglobal = (obj, key='var') => ;
for (let i in obj)
}
現在大致已經可以了, 然後你要解決一下, 如果重複呼叫 'bindtoglobal' 後面的會覆蓋掉前面
所定義的 變數/常量, 而我們要的是 追加, 不是覆蓋, 所以**做個調整:
let bindtoglobal = (obj, key='var') => ;
}for (let i in obj)
}
到這裡已經結束了.
最後對 'bindtoglobal' 做乙個修改, 使得你以後使用的時候比較簡單方便一點
雖然開放了繫結在 window 物件上面的物件的名字, 但是你是不是就可以隨便起名字?
你是這樣繫結呢:
這樣訪問:
還是按照它是常量還是變數去繫結:
這樣訪問:
_const.host;
也就是說 犧牲語義, 換來維護簡單一點.
試想如果追求語義, 你分的非常細, 定了七八個 key。
Vue 中如何定義全域性的變數和常量
我想要定義乙個變數,在專案的任何地方都可以訪問到,不需要每一次使用的時候,都引入.嘗試1 建立 global.js 並且在其中定義 let a 10 在入口檔案中引入 global.js import global.js 在專案中使用 a 報錯發現報錯了,a 並沒有定義.為什麼?這個涉及到模組作用域...
vue定義全域性變數
在開發中,有時需要將從介面請求到的一些資料當做全域性變數,在其他頁面多次使用。比如,登入成功後可能需要將使用者名稱,id等資訊存起來,便於其他頁面展示或使用,將這些資訊定義為全域性變數是用起來就很方便。舉栗子 在login.vue中拿到了使用者的一些資訊 import vue from vue 注意...
vue定義全域性變數
在開發中,有時需要將從介面請求到的一些資料當做全域性變數,在其他頁面多次使用。比如,登入成功後可能需要將使用者名稱,id等資訊存起來,便於其他頁面展示或使用,將這些資訊定義為全域性變數是用起來就很方便。例如 export default methods vue.prototype.usermsg u...