vue3的全局函数和变量

• mani.ts中注册

import { createApp,toRaw } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus, { Filter } from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia, PiniaPluginContext } from 'pinia'
const store = createPinia()
const app = createApp(App)
//-------------注册全局函数和变量-----------------
app.config.globalProperties.$env = 'dev'    // 定义全局函数和全局变量
app.config.globalProperties.$filters = {
  format<T>(str: T) {
    return `小田螺-${str}`
  }
}   
type Filter = {
  format<T>(str: T): string,

}
declare module 'vue' {
  export interface ComponentCustomProperties {
    $filters: Filter,
    $env: string
  }
}
//-------------注册全局函数和变量-----------------

//-------------状态持久化-----------------
const setStore = (key: string, value: any) => {
  localStorage.setItem(key, JSON.stringify(value))
}
type Options = {
  key?:string
}
const __piniaKey__ = 'lxmm'
const getStore = (key:string) => {
  return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {}
}
const piniaPlugin = (option:Options) => {
  return (context: PiniaPluginContext) => {
    console.log(context, 'context')
    const { store } = context
    const data = getStore(`${option?.key ?? __piniaKey__}-${store.$id}`)
    store.$subscribe(() => {
      console.log('change')
      setStore(`${option?.key ?? __piniaKey__}-${store.$id}`,toRaw(store.$state))
    })
    return {
      ...data
    }
  }
}
store.use(piniaPlugin({
  key:"pinia"
}))
//-------------状态持久化-----------------

app.use(ElementPlus)
app.use(store)
app.mount('#app')

• 全局函数和变量组件中使用

<script setup lang="ts">
import {ref,reactive,getCurrentInstance} from 'vue'
const app = getCurrentInstance()
console.log('aap==>', app?.proxy?.$filters.format('mac电脑'))
</script>
<template>
<div class=''>
  {{ $env }}
  {{ $filters.format('苹果手机') }}
</div>
</template>
<style lang='scss' scoped>
</style>