Vue項目中定義全局變量的幾種常用方法總結
更新時間：2023年12月12日 15:32:02 作者：鄒榮樂
在項目中經常有些函數和變量是需要復用,比如說網站服務器地址,從后臺拿到的用戶的登錄token,用戶的地址信息等,這時候就需要設置一波全局變量,這篇文章主要給大家介紹了關于Vue項目中定義全局變量的幾種常用方法的相關資料,需要的朋友可以參考下
前言
在Vue項目中我們需要使用許多的變量來維護數據的流向和狀態(tài)，這些變量可以是本地變量、組件變量、父子組件變量等，但這些變量都是有局限性的。在一些場景中，可能需要在多個組件中共享某個變量，此時全局變量就派上了用場。
定義全局變量的方法
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項目的根目錄中創(chuàng)建一個.env文件，用于存儲一些全局變量。
- 在.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)建一個全局變量的js文件。示例文件路徑為：./utils/globalVar.js
//globalVar.js
export default {
data() {
return {
baseUrl: "https://www.example.com/api"
};
}
}
- 在項目的 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定義全局變量
通過將變量存儲在 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提供了專門公共數據配置的方式: 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、自動配置打包版本日期
在前端開發(fā)過程中，總會遇到前端包部署之后，不知道是否成功，是否替換了原來的包，看不出來事什么時候的包。我們可以在控制臺輸出一個打包的日期。這樣就很容易區(qū)分前端包的版本日期了。
7.1、vue3在vite.config.js中定義環(huán)境變量。獲取當前打包日期時間。
- 在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)境變量。獲取當前打包日期時間。
- 在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>總結
到此這篇關于Vue項目中定義全局變量的幾種常用方法總結的文章就介紹到這了,更多相關Vue定義全局變量內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue設計一個倒計時秒殺的組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要為大家詳細介紹了Vue組件化學習之scoped，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
在項目中,有時需要打印頁面的表格,所以下面這篇文章主要給大家介紹了關于vue打印功能實現的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下2021-06-06
項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法
這篇文章主要給大家介紹了關于項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法,文中通過代碼介紹的非常詳細,對大家學習或者使用vite具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
這篇文章給大家詳細分析了關于VUE的常用的相關指令內容，對此有需要的朋友們可以學習下。2018-08-08
這篇文章主要介紹了vue組件中實現嵌套子組件案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue使用file-saver本地文件導出,大家需要安裝xlsx和file-saver，然后創(chuàng)建localExports.js文件，具體實現代碼跟隨小編一起看看吧2022-01-01
這篇文章主要介紹了Vue-input框checkbox強制刷新問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
本篇文章主要介紹了vue.js移動端tab的封裝實踐實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
使用el-table組件拖拽時,?想使用自定義樣式進行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實現代碼,感興趣的朋友一起看看吧2025-04-04