Vue3依赖注入封装setup中使用use函数

封装逻辑

参考pinia、vue-router等的create和use方法,做一个埋点上报的小插件，能够满足在vue3中使用this.$的方式和use的方式,并且能够保证一些全局变量的保存

import { App, InjectionKey, inject } from 'vue'

export interface ITracker {
  push(eventType: string, eventId: string, data?: object): void
  setUserId(userId: string): void
  install(app: App): void
}

export interface ITrackerConfig{
  userId?: string,
  baseUrl?: string
}

export const TrackerKey: InjectionKey<ITracker> = Symbol('')

// 创建tracker对象全局注册
const createTracker = (config?: ITrackerConfig) => {
  let uId = config?.userId
  const key = 'CLIENT_TRACKER_UUID'
  let cid = localStorage.getItem(key)
  if (!cid) {
    cid = 'xxxxx-xxxxxx'
    localStorage.setItem(key,cid)
  }

  const push = (eventType: string, eventId: string, data?: object) => {
    sendTracker({
      userId: uId,
      appid: cid,
      eventType: eventType,
      eventId: eventId,
      data: data
    })
  }

  const setUserId = (userId: string) => {
    uId = userId
  }

  const sendTracker = (data: any) => {
    console.log(data)
  }

  const tracker: ITracker = {
    push,
    setUserId,
    install(app: App) {
      // 支持this.$tracker
      app.config.globalProperties.$tracker = tracker
      app.provide(TrackerKey, tracker)
    },
  }
  return tracker
}

const useTracker = () => {
  return inject(TrackerKey)!
}

export { useTracker, createTracker }

使用

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import './assets/scss/global.scss'
import router from './router'
import { createPinia } from 'pinia'
import { createTracker } from './packages/Tracker'

const pinia = createPinia()
const tracker = createTracker()

createApp(App).use(pinia).use(router).use(tracker).mount('#app')

组件中

<template>
  <div class="home">
  </div>
</template>


<script setup lang="ts">
import { useTracker } from '@/packages/Tracker'
  
const tracker = useTracker()
  
tracker.push('测试Tracker', '100001')
</script>


<style scoped lang="scss">
</style>

参考：

组合式 API：依赖注入 | Vue.js