Vue 中如何定義全域性的變數和常量

我想要定義乙個變數, 在專案的任何地方都可以訪問到, 不需要每一次使用的時候, 都引入.

嘗試1:

建立 global.js 並且在其中定義

let a = 10;

import './global.js'

a // 報錯

這個涉及到模組作用域:

1 每乙個 js 都相當於乙個模組, 乙個模組有自己的模組作用域.

意思就是說: 其中的變數方法, 都只在這個模組上面生效.

嘗試2:

將變數放到 vue.prototype 上面, 通過外掛程式全域性引入

建立 global.js, 這樣寫:

let a = 10;

export default 
}

import g from './global'

vue.use(g);

this.$a

嘗試3:

將變數放到 window 物件上面

建立 global.js

window.a = 10;

import './global.js'

a

有什麼缺點嗎?

暫時沒有發現.

global.js

可以很明顯的看到, 一旦你要定義的變數或者常量過多, 就能瘋了.

所以我們希望有一種方式, 我們定義還是按照自己的方式定義:

然後有乙個方法fn, 可以將這兩個引數, 直接繫結到 window 物件上面

實現:你需要傳遞乙個物件給方法 fn, fn 負責將這個物件中的每乙個 key 都繫結到 window 物件上面.

let bindtoglobal = obj => 

}

你這樣用之後, 所有的變數/常量都繫結在 window 物件上面, 很容易就和已經存在 window 物件上面的變數

衝突, 所以要收斂你的行為, 這樣:

你先在window 物件上面設定乙個屬性, 屬性值是乙個物件, 比如這樣:

window.key = {};

let bindtoglobal = obj => ;

for (let key in obj) 
}

let bindtoglobal = (obj, key='var') => ;

for (let i in obj) 
}

所定義的 變數/常量, 而我們要的是 追加, 不是覆蓋, 所以**做個調整:

let bindtoglobal = (obj, key='var') => ;

}for (let i in obj) 
}

最後對 'bindtoglobal' 做乙個修改, 使得你以後使用的時候比較簡單方便一點

雖然開放了繫結在 window 物件上面的物件的名字, 但是你是不是就可以隨便起名字?

你是這樣繫結呢:

bindtoglobal(wexin, '_wexin');這樣訪問:

_http.host

bindtoglobal(wexin, '_const');這樣訪問:

_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...