vue3全局属性/方法的创建及使用--app.config.globalProperties(支持ts)

场景：

开发的路上布满荆棘，项目的需求错综复杂；有时一些属性值或方法想要在很多个组件中被使用，且想要进行统一管理，就可以将这些属性值或方法注册在能够被应用内所有组件实例访问到的对象中。

ps：在 vue2 中，我们通常直接使用 Vue.prototype 来将属性值或方法挂载在vue实例的原型对象上，使其在所有组件内都可以通过 this.属性名 来获取到，此写法在 Vue 3 已经不存在了。

本方法一般适用于结构比较简单且创建之后不需要改变的属性值或方法。

结构复杂或在项目运行过程中还可能被改变的属性值或方法，建议使用pinia或vuex来进行统一管理和全局使用，代码的可读性和可维护性会更好。

实现：

步骤一

将想要全局使用的属性或方法注册在app.config.globalProperties对象中

方法1  在main.ts中直接添加（此处以方法为例，也可直接添加变量）

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App).use(router)

// 注册全局方法
app.config.globalProperties.$addValue = (value: number) => {
    return value + 857
}

// 将应用实例挂载
app.mount('#app')

方法2  当有较多的属性值或方法想要在全局使用时，考虑到代码的美观和可维护性，可以使用插件的方式添加

插件 (Plugins) 就是一种方便为 Vue 批量添加全局功能的工具代码，定义和使用都比较简单。想要了解更多插件相关内容的大朋友们可以看看官网这篇介绍：vue3-插件

(1)  创建一个ts文件，并在其中定义插件（此处以src/plugins/globalProperties.ts文件为例）

import { type App } from "vue"

// 添加全局属性插件
export const addGlobalPropertiesPlugin = {
  // 参数 会自动接收到安装本插件的应用实例
  install(app: App) {
    // 注册想在全局使用的方法和变量
    app.config.globalProperties.$addValue = (value: number) => {
      return value + 857
    }
    app.config.globalProperties.$globalValue = '我是全局变量'
  }
}

(2)  在main.ts中安装插件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 引入插件并安装
import { addGlobalPropertiesPlugin } from '@/plugins/globalProperties'
const app = createApp(App).use(router).use(addGlobalPropertiesPlugin)


// 将应用实例挂载
app.mount('#app')

步骤二

若是项目使用了TypeScript，需要给新增的全局属性补充类型声明，否则在使用时ts会报错。若项目使用的是JavaScript，恭喜你，可以跳过本步骤。

创建一个.d.ts文件，并确认该文件的路径是在tsconfig.json中include对象内配置过的，即可以被ts检测到。（文件可以根据需求命名，此处命名为 global-properties.d.ts）

import { ComponentCustomProperties } from "@vue/runtime-core";

declare module '@vue/runtime-core' {
  // 根据新增加的属性 追加类型声明
  interface ComponentCustomProperties {
    $addValue(value: number): number;
    $globalValue: string;
  }
}

步骤三

在任意组件内使用属性或方法（不论在步骤一中选用了哪种方法创建，使用的方式都相同）

情况1  在模板中使用，直接使用即可

<div>
    <!-- 直接使用全局方法 页面会展示返回值858 -->
    {{ $addValue(1) }}
</div>

情况2  在<script>中使用

若是使用选项式API，可以直接使用 this.属性名 来访问。
若是使用组合式API，需要先使用getCurrentInstance来获取到当前组件实例的上下文，再进行使用。

<script setup lang="ts">
    // getCurrentInstance获取当前组件实例的上下文信息
    import { getCurrentInstance } from "vue"
    // 表示当前组件实例的类型
    import type { ComponentInternalInstance } from "vue"
    // 获取proxy属性 可以访问挂载在全局的实例和方法(需要断言 否则ts报错)
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;

    // 使用全局方法和变量(因proxy可能为null 若不使用?. ts会报错)
    console.log(proxy?.$addValue(2))     // 859
    console.log(proxy?.$globalValue)     // 我是全局变量
<script>

现在，你已经掌握了vue3全局属性/方法的创建及使用，可以出去炫耀了！