Vue 新增全域性變數

2021-08-20 02:42:37 字數 564 閱讀 3605

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

試過幾種方法:

1、請求成功後存在vue.prototype.***

2、請求成功後存在localstorage中

但是以上兩種方法不能實現,因為請求是非同步的,頁面初始化用到這個值時請求還未完成,並且值更新後不會繫結到頁面中。

因為只有乙個變數,要使用vuex有點浪費了。

後來找到一種方法,將值存在根節點中,這樣子元件就都能用到這個值了,值更新後也能實時渲染:

首先我們在根節點中初始化這個值:

var obj = new vue(

}})

然後在請求成功後更新這個值

axios('api/msg/getuserrole').then(data => )
然後在子元件中通過$root.$data.userrole

拿到這個值。

就可以啦!!!

Vue之新增全域性變數

定義全域性變數 原理 設定乙個專用的的全域性變數模組檔案,模組裡面定義一些變數初始狀態,用export default 暴露出去,在main.js裡面使用vue.prototype掛載到vue例項上面或者在其它地方需要使用時,引入該模組便可。全域性變數模組檔案 global.vue檔案 使用方式1 ...

vue全域性變數

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

vue定義全域性變數

在開發中,有時需要將從介面請求到的一些資料當做全域性變數,在其他頁面多次使用。比如,登入成功後可能需要將使用者名稱,id等資訊存起來,便於其他頁面展示或使用,將這些資訊定義為全域性變數是用起來就很方便。舉栗子 在login.vue中拿到了使用者的一些資訊 import vue from vue 注意...