在 Vue 組件之外使用全局屬性 - Vue 3

Question

我在main.ts中創建了自定義服務實例

app.config.globalProperties.$service1 = new Service1();
app.config.globalProperties.$service2 = new Service2();

我可以在 vue 組件中使用這些實例，但我希望能夠在某些實用程序文件中使用它們。

在 vue 2 中是這樣的：

import Vue from "vue";
Vue.prototype.$service1.someMethod("foo");

對我有用的唯一選擇是在main.ts中導出app實例並將其導入我的實用程序文件中，但這看起來不正確。

Vue 3 中的Vue.prototype等價物是什么？

如何保持單例並仍然使用 vue 組件之外的實例？

Answer 1

沒有充分的理由將此代碼編寫在 main.ts 中，那么就沒有必要從它不屬於的地方獲取服務實例。

借助模塊化 JS 的優勢，可以在模塊中定義服務實例：

export default new Service1();

然后在它使用的每個模塊中導入服務：

import service1 from '.../service';

沒有必要像使用Vue.prototype那樣將其暴露給所有組件實例，后者是使用Vue變量作為全局命名空間的非模塊化 Vue 的殘余。 目前，通過app.config.globalProperties暴露全局依賴關系只需要那些應該在組件模板中使用的，例如過濾器。