在 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。
具体用法可以看另一篇。