vue3中如何實(shí)現(xiàn)定義全局變量
vue3定義全局變量
在vue2中，我們知道vue2.x是使用Vue.prototype.$xxxx=xxx來定義全局變量，然后通過this.$xxx來獲取全局變量。
但是在vue3中，這種方法顯然不行了。因?yàn)関ue3中在setup里面我們是無法獲取到this的，因此按照官方文檔我們使用下面方法來定義全局變量：
首先在main.js里寫一個(gè)我們要定義的全局變量，比如一個(gè)系統(tǒng)id吧
app.config.globalProperties.$systemId = "10"
現(xiàn)在在頁面里需要使用這個(gè)變量，只需要從vue中引入getCurrentInstance即可，注意不能在頁面中使用this.
import { getCurrentInstance } from "vue";
const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId
console.log(systemId);//控制臺可以看到輸出了10vue3全局變量app.config.globalProperties的使用
globalProperties
- 類型：[key: string]: any
- 默認(rèn)：undefined
- 用法
添加一個(gè)可以在應(yīng)用的任何組件實(shí)例中訪問的全局 property。組件的 property 在命名沖突具有優(yōu)先權(quán)。
這可以代替 Vue 2.x Vue.prototype 擴(kuò)展：
// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
?
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}當(dāng)我們想在組件內(nèi)調(diào)用http時(shí)需要使用getCurrentInstance()來獲取。
import { getCurrentInstance, onMounted } from "vue";
export default {
? setup( ) {
? ? const { ctx } = getCurrentInstance(); //獲取上下文實(shí)例，ctx=vue2的this
? ? onMounted(() => {
? ? ? console.log(ctx, "ctx");
? ? ? ctx.http();
? ? });
? },
};getCurrentInstance代表上下文，即當(dāng)前實(shí)例。ctx相當(dāng)于Vue2的this, 但是需要特別注意的是ctx代替this只適用于開發(fā)階段，如果將項(xiàng)目打包放到生產(chǎn)服務(wù)器上運(yùn)行，就會出錯(cuò)，ctx無法獲取路由和全局掛載對象的。此問題的解決方案就是使用proxy替代ctx，代碼參考如下。
import { getCurrentInstance } from 'vue'
export default ({
? name: '',
? setup(){
? ? const { proxy } = getCurrentInstance() // 使用proxy代替ctx，因?yàn)閏tx只在開發(fā)環(huán)境有效
?? ?onMounted(() => {
? ? ? console.log(proxy, "proxy");
? ? ? proxy.http();
? ? });
? }
})注意：尤大在vue3推薦使用依賴注入：provide和inject。原因：vue/rfcs.
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue之vue.$set()方法源碼案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
本文主要介紹了vue使用axios接收流文件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家介紹了一款不用跑項(xiàng)目的vscode組件所見即所得效果的使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
本文主要介紹了vue實(shí)現(xiàn)列表拖拽排序的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
本篇文章主要介紹了Vue 中批量下載文件并打包的示例代碼，用 ajax 將文件下載, 然后用 jszip 壓縮文件, 最后用 file-saver 生成文件，有興趣的可以了解一下2017-11-11
這篇文章主要介紹了vue中跨域以及sessionId不一致問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時(shí)，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)2022-10-10
vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)
這篇文章主要介紹了vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要為大家介紹了gulp模塊使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue項(xiàng)目中如何調(diào)用多個(gè)不同的ip接口
這篇文章主要介紹了vue項(xiàng)目中如何調(diào)用多個(gè)不同的ip接口，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08