Vue項(xiàng)目中定義全局變量的幾種常用方法總結(jié)
更新時(shí)間：2023年12月12日 15:32:02 作者：鄒榮樂
在項(xiàng)目中經(jīng)常有些函數(shù)和變量是需要復(fù)用,比如說網(wǎng)站服務(wù)器地址,從后臺(tái)拿到的用戶的登錄token,用戶的地址信息等,這時(shí)候就需要設(shè)置一波全局變量,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中定義全局變量的幾種常用方法的相關(guān)資料,需要的朋友可以參考下
前言
在Vue項(xiàng)目中我們需要使用許多的變量來維護(hù)數(shù)據(jù)的流向和狀態(tài)，這些變量可以是本地變量、組件變量、父子組件變量等，但這些變量都是有局限性的。在一些場(chǎng)景中，可能需要在多個(gè)組件中共享某個(gè)變量，此時(shí)全局變量就派上了用場(chǎng)。
定義全局變量的方法
1、使用Vue.prototype定義全局變量
通過在 vue 的原型上定義屬性，可以在所有組件中訪問該屬性。
- 在main.js定義全局變量
// main.js Vue.prototype.baseUrl = "https://www.example.com/api"
- 在頁面中使用
<template>
<div>
{{baseUrl}}
</div>
</template>
- 在方法中使用
<script>
created() {
console.log(this.baseUrl)
},
</script>
2、使用env文件定義全局變量
在Vue項(xiàng)目的根目錄中創(chuàng)建一個(gè).env文件，用于存儲(chǔ)一些全局變量。
- 在.env文件中定義
VUE_APP_BASE_URL = "https://www.example.com/api"
- 在方法中使用
<script>
created() {
const baseUrl = process.env.VUE_APP_BASE_URL
console.log(baseUrl)
},
</script>
3、使用vuex定義全局變量
vuex 是 vue 的官方狀態(tài)管理庫，可以用于管理全局狀態(tài)。
- 定義全局變量
//store/index.js
export default new Vuex.Store({
state: {
baseUrl: "https://www.example.com/api"
},
})
- 在頁面中使用
<template>
<div>
{{this.$store.state.baseUrl}}
</div>
</template>
- 在方法中使用
<script>
created() {
const baseUrl = this.$store.state.baseUrl
console.log(baseUrl)
},
</script>
4、使用Vue.mixin定義全局變量
通過混入(mixin)的方式，可以將一些公共的屬性或方法混入到所有組件中。
- 創(chuàng)建一個(gè)全局變量的js文件。示例文件路徑為：./utils/globalVar.js
//globalVar.js
export default {
data() {
return {
baseUrl: "https://www.example.com/api"
};
}
}
- 在項(xiàng)目的 main.js 文件中引入該 globalVar.js 文件并使用 Vue.mixin() 方法將之全局混入：
//main.js import globalVar from './utils/globalVar.js' Vue.mixin(globalVar)
- 在頁面中使用
<template>
<div>
{{baseUrl}}
</div>
</template>
- 在方法中使用
<script>
created() {
console.log(this.baseUrl)
},
</script>
5、使用localStorage 或 sessionStorage定義全局變量
通過將變量存儲(chǔ)在 localStorage 或 sessionStorage 中，可以在所有組件中共享該變量。
- 在main.js中定義
localStorage.setItem("baseUrl", "https://www.example.com/api")
- 在方法中使用
<script>
created() {
const baseUrl = localStorage.getItem("baseUrl")
console.log(baseUrl)
},
</script>
6、vue3中配置globalProperties
vue3提供了專門公共數(shù)據(jù)配置的方式: globalProperties、getCurrentInstance
- 在main.js中定義
//main.js
import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
app.config.globalProperties.baseUrl = "https://www.example.com/api"
app.mount('#app')
- 在頁面中使用
<template>
<div>
{{baseUrl}}
</div>
</template>
- 在方法中使用
<script setup>
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
console.log(proxy.baseUrl)
</script>
7、自動(dòng)配置打包版本日期
在前端開發(fā)過程中，總會(huì)遇到前端包部署之后，不知道是否成功，是否替換了原來的包，看不出來事什么時(shí)候的包。我們可以在控制臺(tái)輸出一個(gè)打包的日期。這樣就很容易區(qū)分前端包的版本日期了。
7.1、vue3在vite.config.js中定義環(huán)境變量。獲取當(dāng)前打包日期時(shí)間。
- 在vite.config.js配置
//vite.config.js process.env.VITE_APP_VERSION = JSON.stringify(new Date().toLocaleString())
- 在App.vue中打印
<script setup>
console.log(import.meta.env.VITE_APP_VERSION)
</script>
7.2、vue2在vue.config.js中定義環(huán)境變量。獲取當(dāng)前打包日期時(shí)間。
- 在vue.config.js配置
//vue.config.js
const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
"process.env.VERSION": JSON.stringify(new Date().toLocaleString())
})
]
}
}
- 在App.vue中打印
<script>
created() {
console.log(process.env.VERSION)
},
</script>總結(jié)
到此這篇關(guān)于Vue項(xiàng)目中定義全局變量的幾種常用方法總結(jié)的文章就介紹到這了,更多相關(guān)Vue定義全局變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇Vue刷新修改頁面中數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3在router中使用pinia報(bào)錯(cuò)的簡(jiǎn)單解決辦法,什么是pinia,可以理解為狀態(tài)管理工具,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
淺析Vue中Virtual?DOM和Diff原理及實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue中Virtual?DOM和Diff原理及實(shí)現(xiàn)的相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-03-03
Vue中使用Three.js引入模型格式(.fbx、.glb)的實(shí)現(xiàn)步驟
最近剛開始做的一個(gè)項(xiàng)目,后面有個(gè)模塊要通過three.js實(shí)現(xiàn)3D的場(chǎng)景,因?yàn)橹耙矝]接觸過3D這塊,就提前學(xué)了一下,做個(gè)記錄,這篇文章主要介紹了Vue中使用Three.js引入模型格式(.fbx、.glb)的實(shí)現(xiàn)步驟,需要的朋友可以參考下2025-08-08
詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過代碼實(shí)例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識(shí)，有這方面興趣的朋友參考下吧。2018-01-01
日歷在很多地方都可以使用的到，本文主要介紹了vue3日歷控件的具體實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
下面小編就為大家分享一篇vue-prop父組件向子組件進(jìn)行傳值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue router 跳轉(zhuǎn)時(shí)打開新頁面的示例方法
這篇文章主要介紹了vue router 跳轉(zhuǎn)時(shí)打開新頁面的示例方法，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)2022-12-12
vuex刷新頁面后如何解決丟失store的數(shù)據(jù)問題
這篇文章主要介紹了vuex刷新頁面后如何解決丟失store的數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12