vue3中如何實(shí)現(xiàn)定義全局變量
vue3定義全局變量
在vue2中,我們知道vue2.x是使用Vue.prototype.$xxxx=xxx來定義全局變量,然后通過this.$xxx來獲取全局變量。
但是在vue3中,這種方法顯然不行了。因?yàn)関ue3中在setup里面我們是無(wú)法獲取到this的,因此按照官方文檔我們使用下面方法來定義全局變量:
首先在main.js里寫一個(gè)我們要定義的全局變量,比如一個(gè)系統(tǒng)id吧
app.config.globalProperties.$systemId = "10"
現(xiàn)在在頁(yè)面里需要使用這個(gè)變量,只需要從vue中引入getCurrentInstance即可,注意不能在頁(yè)面中使用this.
import { getCurrentInstance } from "vue"; const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId console.log(systemId);//控制臺(tái)可以看到輸出了10
vue3全局變量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)行,就會(huì)出錯(cuò),ctx無(wú)法獲取路由和全局掛載對(duì)象的。此問題的解決方案就是使用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)文章
解決Vue2.0自帶瀏覽器里無(wú)法打開的原因(兼容處理)
本篇文章主要介紹了解決Vue2.0自帶瀏覽器里無(wú)法打開的原因(兼容處理),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-07-07vant/vue手機(jī)端長(zhǎng)按事件以及禁止長(zhǎng)按彈出菜單實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vant/vue手機(jī)端長(zhǎng)按事件以及禁止長(zhǎng)按彈出菜單實(shí)現(xiàn)方法詳解,需要的朋友可以參考下2022-12-12Vuejs學(xué)習(xí)筆記之使用指令v-model完成表單的數(shù)據(jù)雙向綁定
表單類控件承載了一個(gè)網(wǎng)頁(yè)數(shù)據(jù)的錄入與交互,本章將介紹如何使用指令v-model完成表單的數(shù)據(jù)雙向綁定功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值。感興趣的朋友跟隨小編一起看看吧2019-04-04vue多頁(yè)面項(xiàng)目實(shí)現(xiàn)版本快照功能示例詳解
這篇文章主要為大家介紹了vue多頁(yè)面項(xiàng)目實(shí)現(xiàn)版本快照功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01使用provide/inject實(shí)現(xiàn)跨組件通信的方法
在 Vue 應(yīng)用中,組件間通信是構(gòu)建復(fù)雜應(yīng)用時(shí)的一個(gè)常見需求,Vue3.x 提供了provide和inject API,讓跨組件通信變得更加簡(jiǎn)潔和高效,本文將深入探討如何使用provide和inject在Vue3.x中實(shí)現(xiàn)跨組件通信,并通過示例代碼一步步進(jìn)行說明,需要的朋友可以參考下2024-03-03vue3.x lodash在項(xiàng)目中管理封裝指令的優(yōu)雅使用
這篇文章主要為大家介紹了vue3.x lodash在項(xiàng)目中管理封裝指令的優(yōu)雅使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解
這篇文章主要為大家介紹了Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue3二次封裝element-ui中的table組件的過程詳解
這篇文章主要給大家介紹了vue3二次封裝element-ui中的table組件的過程,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友跟著小編一起來學(xué)習(xí)吧2024-01-01