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

2022-02-25 09:51:34 字數 2617 閱讀 8043

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

嘗試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...