vue全域性變數 頁面重新整理時資料丟失問題

2021-10-03 17:17:54 字數 1716 閱讀 6020

在開發中,我們需要將一些資料存到全域性變數中,如使用者的使用者名稱等,便於頁面展示,儲存從伺服器傳送請求返回的資料,以避免在不同元件傳送相同請求時,重複請求伺服器。

common.js:

var typeoptions =

const testconst =

'我是常量'

export

default

全域性掛載:

import common from

'./store/common.js'

vue.prototype.$global = common

在login.vue元件中登入成功後為它賦值

...登入成功後

this

.$global.typeoptions =

[...

]

在需要的元件中第一次使用發現沒有問題,並且console.log(this.glo

bal.

type

opti

ons)

完全沒毛

病,重點

來了!!

!重新整理頁

面後發現

取不到這

個資料了

,再次c

onso

le.l

og(t

his.

global.typeoptions)完全沒毛病,重點來了!!! 重新整理頁面後發現取不到這個資料了,再次console.log(this.

global

.typ

eopt

ions

)完全沒

毛病,重

點來了!

!!重新整理

頁面後發

現取不到

這個資料

了,再次

cons

ole.

log(

this

.global.typeoptions)竟然為空!!

然而console.log(this.$global.testconst)發現可以取到這個值。

原因很簡單,在頁面重新整理時,vue例項物件被重新構造,所有變數都被初始化。

結論:全域性變數裡的資料最好是const常量,才能在頁面重新整理後仍然可用。

(ps:在網上看到有這樣的解決辦法:監聽頁面重新整理,在重新整理前先將全域性變數存到sessionstorge中,重新整理完畢後用鉤子函式再次將sessionstorge中的值賦給全域性變數。但是個人不太推薦,下面有更直接的方法)

儲存到localstorgesessionstorge中,一般瀏覽器可以存5m(當然,也可以儲存在cookies中,但是這種方法不推薦,容量小而且安全性差)

localstorge是永久儲存在本地,除非手動刪除。

sessionstorge是當前會話有效。

考慮vue是單頁面應用,所有元件在同乙個頁面中跳轉,所以sessionstorge最為合適。

因此,推薦使用sessionstorge

sessionstorge訪問資料直接用setitem和getitem函式就行辣~~

(當然,如果不想被使用者直接在控制台看到儲存的資訊,推薦第一種)

vue全域性變數 頁面重新整理時資料丟失問題

在開發中,我們需要將一些資料存到全域性變數中,如使用者的使用者名稱等,便於頁面展示,儲存從伺服器傳送請求返回的資料,以避免在不同元件傳送相同請求時,重複請求伺服器。common.js var typeoptions const testconst 我是常量 export default 全域性掛載 ...

vue全域性變數

vue全域性變數 好,下面介紹一種方式,把全域性變數引入。1 新建js檔案 檔案內容如下 const base url export default 2 修改入口main.js檔案 import global from static config global 然後使用變數 vue.prototyp...

Vue 新增全域性變數

專案中經常會有這樣的需求 剛進入頁面時獲取使用者許可權,然後控制其他頁面某些元素的顯示 比如管理員許可權會顯示管理的tab。普通使用者則不顯示 這個獲取的許可權可能會在很多頁面中用到,如果存成全域性的就比較方便了。試過幾種方法 1 請求成功後存在vue.prototype.2 請求成功後存在loca...