vue中定義全域性變數
阿新 • • 發佈:2018-12-18
定義全域性變數
設定一個專用的全域性變數模組檔案,模組裡面定義一些變數的初始狀態,用export default暴露出去,在main,js裡面使用Vue.prototype掛載到vue例項上面或者在其他地方需要使用時,引入該模組即可。
全域性變數模組檔案
Global.vue檔案:
<script>
const serverSrc='www.baidu.com';
const token='12345678';
export default
{
token,//使用者token身份
serverSrc,//伺服器地址
}
</script>
使用方法1
在需要的地方引用進全域性變數模組檔案,然後通過檔案裡面的變數名字獲取全域性變數引數值。
<template>
<div>{{ token }}</div>
</template>
<script>
import global_ from '../../components/Global'//引用模組進來
export default {
name: 'text',
data () {
return {
token:global_.token,//將全域性變數賦值到data裡面,也可以直接使用global_.token
}
}
}
</script>
使用方法2
在程式入口的main.js檔案裡面,將上面哪個Global.vue檔案掛載到Vue.prototype。
import global_ from './components/Global'//引用檔案
Vue.prototype.GLOBAL = global_//掛載到Vue例項上面
在整個專案中不需要在應用Global.vue模組檔案,直接通過this就可以直接訪問Global檔案裡面定義的全域性變量了
<template>
<div>{{ token }}< /div>
</template>
<script>
export default {
name: 'text',
data () {
return {
token:this.GLOBAL.token,//直接通過this訪問全域性變數。
}
}
}
</script>