在 Vue 3 中，你可以使用全局 API 的 createApp 方法来创建 Vue 应用，并通过该应用的 config.globalProperties 属性来添加全局实例属性。这样，你就可以在任何组件内部通过 this 访问这些属性。
但是，需要注意的是，在 Vue 3 的 Composition API 中，this 关键字不再在 setup 函数内部可用。因此，如果你正在使用 Composition API，你需要使用 getCurrentInstance 函数来获取当前实例，并访问其属性。
以下是如何在 Vue 3 中注册全局实例属性的步骤
1. 使用 createApp 方法创建 Vue 应用
import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App);
2. 通过 config.globalProperties 添加全局实例属性
app.config.globalProperties.$myGlobalProperty = 'Hello, World!';
3. 在组件中使用全局实例属性
export default { mounted() { console.log(this.$myGlobalProperty); // 输出 "Hello, World!" } }` // 如果你使用的是 Composition API： // 你需要从 `vue` 包中导入 `getCurrentInstance` 函数，并使用它来访问全局实例属性。 import { getCurrentInstance } from 'vue'; export default { setup() { const instance = getCurrentInstance(); if (instance) { console.log(instance.appContext.config.globalProperties.$myGlobalProperty); // 输出 "Hello, World!" } } }
注意：使用全局实例属性时应该谨慎，避免命名冲突，并确保这些属性不会意外地被组件修改。
另外，Vue 3 提供了更灵活和可维护的替代方案，如使用 Provide/Inject API 或 Vuex 进行状态管理，这可能更适合大型应用或需要更严格状态管理的场景。
注意：getCurrentInstance 主要用于库/高级用途，并可能在未来的 Vue 版本中发生变化或被移除。在常规应用开发中，应优先考虑使用其他 API 和模式。
更新：在 Vue 3.2+ 中，你可以使用 provide 和 inject API 来更安全、更明确地共享状态。这是推荐的方法，因为它提供了更好的封装和类型支持。
// 在根组件或父组件中 import { provide, ref } from 'vue'; export default { setup() { const myGlobalProperty = ref('Hello, World!'); provide('myGlobalProperty', myGlobalProperty); } }; // 在任何子组件中 import { inject } from 'vue'; export default { setup() { const myGlobalProperty = inject('myGlobalProperty'); console.log(myGlobalProperty.value); // 输出 "Hello, World!" } };
使用 provide 和 inject 可以避免全局状态的潜在问题，并使得状态管理更加明确和可预测。
总的来说，选择哪种方法取决于你的具体需求和偏好。
注意：在 Vue 3.x 中，provide 和 inject 只能在 setup 函数内部使用，因为它们是基于 Composition API 的。如果你使用的是 Options API，你可能需要将你的逻辑迁移到 Composition API，或者使用其他方法（如 mixins、Vuex 等）来共享状态。
希望这可以帮助你理解如何在 Vue 3 中注册和使用全局实例属性！
4. 方式对比
- 方式一
在 Vue 2 中， Vue.prototype 通常用于添加所有组件都能访问的 property。 在 Vue 3
等同于config.globalProperties。这些 property 将被复制到应用中作为实例化组件的一部分
// 之前 - Vue 2 Vue.prototype.$http = () => {} // 之后 - Vue 3 const app = createApp({}) app.config.globalProperties.$http = () => {} ```
上面是官方给得说明
下面是我的具体用法：
在vue3中注册一个全局实例方法
import {createApp} from 'vue' import App from './App.vue' const app = createApp(App) app.config.globalProperties.$translate = key => { return key.split('.').reduce((o, i) => { if (o) return o[i] }, i18n) }
在vue实例的setup()函数中没有this对象，如何调用实例方法$translate呢：
import {getCurrentInstance} from "vue"; const internalInstance = getCurrentInstance(); const request = internalInstance.appContext.config.globalProperties.$translate;
哦了
- 第二种方式：通过provide注入
与在 2.x 根实例中使用 provide 选项类似，Vue 3 应用实例也提供了可被应用内任意组件注入的依赖项：
//入口处全局导入 app.provide("dayjs", dayjs) app.provide("request",request)
<script> import {toRef, nextTick, inject, ref, computed} from "vue" export default { //普通用法 inject: ['dayjs'], setup(props, {emit}) { //setup中的用法 const dayjs = inject("dayjs") return { } } } </script>
使用 provide 在编写插件时非常有用，可以替代 globalProperties。
在应用之间共享配置
上面也是官方推荐得方式，但是他举得这个例子有点瞎b。
具体用法可以看另一篇。
