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)，這些變量可以是本地變量、組件變量、父子組件變量等，但這些變量都是有局限性的。在一些場景中，可能需要在多個(gè)組件中共享某個(gè)變量，此時(shí)全局變量就派上了用場。
定義全局變量的方法
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定義全局變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件詳解
這篇文章主要介紹了vue設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue組件化學(xué)習(xí)之scoped，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue打印功能實(shí)現(xiàn)的兩種方法總結(jié)
在項(xiàng)目中,有時(shí)需要打印頁面的表格,所以下面這篇文章主要給大家介紹了關(guān)于vue打印功能實(shí)現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下2021-06-06
項(xiàng)目遷移vite引入圖片資源報(bào)require?is?not?defined問題的解決辦法
這篇文章主要給大家介紹了關(guān)于項(xiàng)目遷移vite引入圖片資源報(bào)require?is?not?defined問題的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vite具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
這篇文章給大家詳細(xì)分析了關(guān)于VUE的常用的相關(guān)指令內(nèi)容，對此有需要的朋友們可以學(xué)習(xí)下。2018-08-08
這篇文章主要介紹了vue組件中實(shí)現(xiàn)嵌套子組件案例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue使用file-saver本地文件導(dǎo)出,大家需要安裝xlsx和file-saver，然后創(chuàng)建localExports.js文件，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧2022-01-01
Vue-input框checkbox強(qiáng)制刷新問題
這篇文章主要介紹了Vue-input框checkbox強(qiáng)制刷新問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue.js移動(dòng)端tab組件的封裝實(shí)踐實(shí)例
本篇文章主要介紹了vue.js移動(dòng)端tab的封裝實(shí)踐實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼
使用el-table組件拖拽時(shí),?想使用自定義樣式進(jìn)行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2025-04-04