vue3中的指令如何在mounted生命周期钩子函数中获取`app.config.globalProperties`?

Question

vue3中的指令如何在mounted生命周期钩子函数中获取app.config.globalProperties?

是写在组件库里，无法获取main.js的app

Answer 1

vnode.appContext里拿

Answer 2

src/main.ts

const app = createApp(App);app.mount('#app');export function getGlobalProperties() {  return app.config.globalProperties;}

src/directives/my-directive.ts

import { Directive } from 'vue';import { getGlobalProperties } from '../main.ts';const vDirective: Directive<HTMLElement, never> = {  mounted(el, binding, vnode, prevVnode) {    const g = getGlobalProperties();    console.log(g);  },};export { vDirective };

Answer 3

在 Vue 3 中，如果你想在指令的 mounted 生命周期钩子函数中获取 app.config.globalProperties，你可以通过指令的绑定对象 binding 来访问到与指令相关的上下文信息。binding 对象包含了指令的多个属性，其中一个属性是 instance，它代表了被绑定指令的组件实例。

由于 app.config.globalProperties 是全局配置对象，通常在应用的入口文件（如 main.js 或 main.ts）中设置，因此你可以通过组件实例的 $app 属性来访问它。但是，请注意，$app 属性在组件内部可能不是直接可用的，你需要确保在组件创建时注入了它。

以下是一个简单的示例，展示了如何在 Vue 3 指令的 mounted 钩子中获取 app.config.globalProperties：

import { DirectiveBinding } from 'vue'const myDirective = {  mounted(el, binding, vnode, prevVnode) {    // 通过 vnode.appContext 访问组件的 appContext    const appContext = vnode.appContext    // 通过 appContext.config.globalProperties 获取全局属性    const globalProperties = appContext.config.globalProperties    // 现在你可以使用 globalProperties 中的任何属性或方法    console.log(globalProperties.someProperty)  }}export default myDirective

在这个示例中，vnode.appContext 提供了对组件应用上下文的访问，你可以从中获取到 config.globalProperties。然后，你就可以像使用普通对象一样使用 globalProperties 了。

请确保在组件创建时注入了 $app 属性，否则 vnode.appContext 可能会是 undefined。如果你使用的是 Vue CLI 创建的项目，通常 $app 会自动注入到组件中。但是，如果你是在其他上下文中使用 Vue，你可能需要手动注入 $app。