vue如何定義全局變量和全局方法實例代碼
更新時間：2023年04月24日 11:39:46 作者：鄭建007
在項目中經(jīng)常會復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時將它們設(shè)為全局的就顯得很重要了,下面這篇文章主要給大家介紹了關(guān)于vue如何定義全局變量和全局方法的相關(guān)資料,需要的朋友可以參考下
開發(fā)中會經(jīng)常用到一些常用的變量和方法 例如ajax這種
一、給vue定義全局變量
1.定義專用模塊來配置全局變量
定義一個專用模塊來配置全局變量，然后通過export暴露出去，在需要的組件引入global.vue
// 定義一些公共的屬性和方法
const httpUrl = 'http://test.com'
// 暴露出這些屬性
export default {
httpUrl,
}引入及使用
<script>
// 導(dǎo)入共用組件
import global from './global.vue'
export default {
data () {
return {
//使用
globalUrl: global.httpUrl
}
}
}
</script>2.通過全局變量掛載到Vue.prototype
同上，定義一個專用模塊來配置全局變量，然后通過export暴露出去，在需要的組件引入global.vue
// 定義一些公共的屬性和方法
const httpUrl = 'http://test.com'
// 暴露出這些屬性
export default {
httpUrl,
}在main.js中引入并復(fù)制給vue
// 導(dǎo)入共用組件 import global from './global.vue' Vue.prototype.global = global
組件調(diào)用
export default {
data () {
return {
// 賦值使用, 可以使用this變量來訪問
globalHttpUrl: this.global.httpUrl
}
}3.使用vuex
安裝：
npm install vuex --save
新建store.js文件
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state:{ httpUrl:'http://test.com' }
})main.js中引入
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
});組件內(nèi)調(diào)用
console.log(this.$store.state.httpUrl)
二、給vue定義全局方法
1.將方法掛載到 Vue.prototype 上面
簡單的函數(shù)可以直接寫在main.js文件里定義。
// 將方法掛載到vue原型上
Vue.prototype.changeData = function (){
alert('執(zhí)行成功');
}使用方法
//直接通過this運行函數(shù)，這里this是vue實例對象 this.changeData();
2. 利用全局混入 mixin
新建一個mixin.js文件
export default {
data() {
},
methods: {
randomString(encode = 36, number = -8) {
return Math.random() // 生成隨機數(shù)字,
.toString(encode) // 轉(zhuǎn)化成36進(jìn)制
.slice(number)
}
}
}// 在項目入口 main.js 里配置
import Vue from 'vue' import mixin from '@/mixin' Vue.mixin(mixin)
// 在組件中使用
export default {
mounted() {
this.randomString()
}
}3. 使用插件方式
plugin.js文件，文件位置可以放在跟main.js同一級，方便引用
exports.install = function (Vue, options) {
Vue.prototype.test = function (){
console.log('test');
};
};main.js引入并使用。
import plugin from './plugin' Vue.use(plugin);
所有的組件里就可以調(diào)用該函數(shù)。
this.test();
總結(jié)
到此這篇關(guān)于vue如何定義全局變量和全局方法的文章就介紹到這了,更多相關(guān)vue定義全局變量和全局方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue3從0搭建Vite打包組件庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
如果說是JQuery是手工作坊,那么Vue.js就像是一座工廠,雖然Vue.js做的任何事情JQuery都可以做,但無論是代碼量還是流程規(guī)范性都是前者較優(yōu),下面這篇文章主要給大家介紹了關(guān)于Vue項目中如何運用vuex的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue引用vee-validate插件表單驗證問題(cdn方式引用)
這篇文章主要介紹了Vue引用vee-validate插件表單驗證問題(cdn方式引用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
詳解如何實現(xiàn)在Vue中導(dǎo)入Excel文件
這篇文章主要介紹了如何在Vue中導(dǎo)入Excel文件，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)或工作有一定幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)電子時鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了van-dialog 組件調(diào)用報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3.0?移動端二次封裝van-uploader實現(xiàn)上傳圖片(vant組件庫)
這篇文章主要介紹了vue3.0?移動端二次封裝van-uploader上傳圖片組件,此功能最多上傳6張圖片，并可以實現(xiàn)本地預(yù)覽，實現(xiàn)代碼簡單易懂，需要的朋友可以參考下2022-05-05
vue3中實現(xiàn)使用element-plus調(diào)用message
這篇文章主要介紹了vue3中實現(xiàn)使用element-plus調(diào)用message，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue 按照創(chuàng)建時間和當(dāng)前時間顯示操作(剛剛,幾小時前,幾天前)
這篇文章主要介紹了Vue 按照創(chuàng)建時間和當(dāng)前時間顯示操作(剛剛,幾小時前,幾天前)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08