Vue 全域註冊屬性 (Vue 2, Vue 3)

全域註冊的優點:不需要在每個組件中分別引入,只需引入一次就能在全部組件中使用。

Vue 2

Vue 2 可以透過 Vue.prototype.$<Name> 來實現註冊全域屬性:

// main.js
import App from "./App.vue";
import * as API from "@/api";

new Vue({
   render: (h) => h(App),
   beforeCreate(){
      Vue.prototype.$API = API;
   }
})

在組件中使用:

methods: {
   getAPIList() {
      console.log(this.$API);
   }
}

https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html

Vue 3

app.config.globalProperties

Vue 3 提供了 app.config.globalProperties 取代 Vue.prototype

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import * as API from "@/api";

const app = createApp(App);
app.config.globalProperties.$API = API;

在組件中使用:

import { getCurrentInstance } from "vue";

export default {
  name: "Demo",
  setup() {
    const app = getCurrentInstance();

    const getAPIList = () => {
      console.log(app.appContext.config.globalProperties.$API);
    }

    return {
      getAPIList
    }
  },
};

注意事項

不過官方文檔給了警告,getCurrentInstance 只暴露給高階使用場景,典型的比如在庫中。盡量避免在應用中使用 getCurrentInstance。請不要把它當作在組合式 API 中獲取 this 的替代方案來使用。

所以除非特殊情形,不然建議 Vue 3 還是組件中單獨引入比較好,因為全域註冊並沒有比較方便。

image 6 Vue 全域註冊屬性 (Vue 2, Vue 3)

https://vuejs.org/api/application.html#app-config-globalproperties

provide & inject

還有一種方法是 provide & inject,不過缺點如同前面 globalProperties 最後提到的注意事項

// main.js
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

import * as API from "@/api";
app.provide('$API', API);

在組件中使用:

import { inject } from "vue";

export default {
  name: "Demo",
  inject: ['$API'],
  setup() {
    const API = inject("$API");

    const getAPIList = () => {
      console.log(API);
    }

    return {
      getAPIList
    }
  },
};

https://vuejs.org/guide/components/provide-inject.html#provide-inject

0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論