Vue学习记录之十五 全局变量和全局函数

Vue3中没有Prototype属性， 可以使用app.config.globalProperties代替，然后去定义变量和函数。

const app = createApp({
    
    })
app.config.globalProperties.$http = () => {
    
    }

实例演示：
main.ts

//import './assets/main.css'

import {
    
     createApp } from 'vue'
import {
    
     createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

//1、定义全局变量
//在任意位置可以使用
app.config.globalProperties.$env = 'dev' //定义当前的开发环境为dev
//2、定义全局函数
app.config.globalProperties.$filters={
    
    
    format<T>(str:T){
    
    
        return `绿曼巴-${
      
      str}`
    }
}
type Filter = {
    
    
    format<T>(str:T):string
}
// 扩展 Vue 3 的类型定义(不加下面代码可以使用，但是有错误提示)
declare module 'vue'{
    
    
    /*
    ComponentCustomProperties.
    这是 Vue 提供的接口，用于定义 Vue 组件实例上可用的属性。
    它表示在 Vue 组件实例（即 this 上）自定义的属性集合。
    */
    export interface ComponentCustomProperties{
    
    
        $filters: Filter, //定义了一个 $filters 属性，并指定它的类型为 Filter(这通常用于在 Vue 实例中挂载一些全局的过滤器或工具函数。)
        $env:string //定义了一个 $env 属性，并指定它的类型为 string。这个属性可以用来存储环境变量或配置信息。
    }
}
app.use(createPinia())
app.use(router)

app.mount('#app')

使用

<template>
    <!--1、在html中获取全局变量和函数的方法。-->
    <div>{
   
   { $env }}</div>
    <div>{
   
   { $filters.format('的网络课程')}}</div>
</template>
<script setup lang='ts'>
import {
      
       ref,reactive,getCurrentInstance } from 'vue'
// 获取当前实例
const app = getCurrentInstance()
//2、在ts中获取全局变量和函数的方法。
console.log(app?.proxy?.$filters.format("的全局函数"))
console.log(app?.proxy?.$env)
</script>
<style scoped>

</style>