vue3中怎麼實作定義全域變數

vue3定義全域變數

在vue2中，我們知道vue2.x是使用Vue.prototype.$xxxx=xxx來定義全域變量，然後透過this.$xxx來取得全域變數。

但是在vue3中，這種方法顯然不行了。因為vue3中在setup裡面我們是無法取得到this的，因此按照官方文件我們使用下面方法來定義全域變數：

首先在main.js裡寫一個我們要定義的全域變量，例如一個系統id吧

app.config.globalProperties.$systemId = "10"

現在在頁面裡需要使用這個變量，只需要從vue中引入getCurrentInstance即可，注意不能在頁面中使用this.

import { getCurrentInstance } from "vue";
const systemId = getCurrentInstance()?.appContext.config.globalProperties.$systemId
console.log(systemId);//控制台可以看到输出了10

vue3全域變數app.config .globalProperties的使用

globalProperties

• #類型：[key: string]: any

• 預設：undefined

• #用法

新增一個可以在應用程式的任何元件實例中存取的全域property。組件的 property 在命名衝突具有優先權。

這可以取代 Vue 2.x Vue.prototype 擴充：

// 之前(Vue 2.x)
Vue.prototype.$http = () => {}
 
// 之后(Vue 3.x)
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

當我們想要在元件內呼叫http時需要使用getCurrentInstance()來取得。

import { getCurrentInstance, onMounted } from "vue";
export default {
  setup( ) {
    const { ctx } = getCurrentInstance(); //获取上下文实例，ctx=vue2的this
    onMounted(() => {
      console.log(ctx, "ctx");
      ctx.http();
    });
  },
};

getCurrentInstance代表上下文，即目前實例。 ctx相當於Vue2的this, 但是需要特別注意的是ctx代替this只適用於開發階段，如果將專案打包放到生產伺服器上運行，就會出錯，ctx無法取得路由和全域掛載物件的。此問題的解決方案是使用proxy取代ctx，程式碼參考如下。

import { getCurrentInstance } from 'vue'
export default ({
  name: '',
  setup(){
    const { proxy } = getCurrentInstance() // 使用proxy代替ctx，因为ctx只在开发环境有效
    onMounted(() => {
      console.log(proxy, "proxy");
      proxy.http();
    });
  }
})

以上是vue3中怎麼實作定義全域變數的詳細內容。更多資訊請關注PHP中文網其他相關文章！