vue3使用全局扩展属性app.config.globalProperties

vue3使用全局扩展属性app.config.globalProperties

前言

在最近的开发中，发现了这种用法，目前并不明确这种有多少副作用，这里只做记录，因此，可能存在大量官网描述。

官网的说明

这是对 Vue 2 中 Vue.prototype 使用方式的一种替代，此写法在 Vue 3 已经不存在了。与任何全局的东西一样，应该谨慎使用。如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级。

TS与选项式api中

某些插件会通过 app.config.globalProperties 为所有组件都安装全局可用的属性。举例来说，我们可能为了请求数据而安装了 this.$http，或者为了国际化而安装了 this.$translate。为了使 TypeScript 更好地支持这个行为，Vue 暴露了一个被设计为可以通过 TypeScript 模块扩展来扩展的 ComponentCustomProperties 接口：

import axios from 'axios'declare module 'vue' {  interface ComponentCustomProperties {    $http: typeof axios    $translate: (key: string) => string  }}

类型扩展的位置

我们可以将这些类型扩展放在一个 .ts 文件，或是一个影响整个项目的*.d.ts文件中。无论哪一种，都应确保在 tsconfig.json 中包括了此文件。对于库或插件作者，这个文件应该在 package.json 的 types 属性中被列出。
为了利用模块扩展的优势，你需要确保将扩展的模块放在 TypeScript 模块 中。 也就是说，该文件需要包含至少一个顶级的 import 或 export，即使它只是 export {}。如果扩展被放在模块之外，它将覆盖原始类型，而不是扩展!

// 不工作，将覆盖原始类型。declare module 'vue' {  interface ComponentCustomProperties {    $translate: (key: string) => string  }}

// 正常工作。export {}declare module 'vue' {  interface ComponentCustomProperties {    $translate: (key: string) => string  }}

扩展自定义选项

某些插件，比如 vue-router，提供了一些自定义的组件选项，比如 beforeRouteEnter：

import { defineComponent } from 'vue' export default defineComponent({  beforeRouteEnter(to, from, next) {    // ...  }})

如果没有确切的类型标注，这个钩子函数的参数会隐式地标注为 any 类型。我们可以为 ComponentCustomOptions 接口扩展自定义的选项来支持：

import { Route } from 'vue-router'declare module 'vue' {  interface ComponentCustomOptions {    beforeRouteEnter?(to: Route, from: Route, next: () => void): void  }}

现在这个 beforeRouteEnter 选项会被准确地标注类型。注意这只是一个例子——像 vue-router 这种类型完备的库应该在它们自己的类型定义中自动执行这些扩展。
这种类型扩展和全局属性扩展受到相同的限制。

我想大家比起云里雾里的官网说明，更简单的操作更直观

main.ts里面配置config

const app = createApp(App);app.config.globalProperties.$http = client  //可以配置一个方法app.config.globalProperties.$user = {//也可以配置一个对象name:'粱友安',boyfriend:'宋三川'}

在template模板中使用

<span>姓名：{{$user.name + 'love' + $user.boyfriend}} </span>

在setup中使用

const con = getCurrentInstance()console.log(con.appContext.config.globalProperties.$user)//或const { proxy } = getCurrentInstance()const http = proxy.$http;   // 这样就可以直接调用axios请求数据方法，如果你配置了的话

说明：其实本身使用并不复杂，但是通过ts进行封装了之后就会显得复杂

本文链接：https://www.kjpai.cn/news/2024-04-20/160637.html，文章来源：网络cs，作者：康由，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！