1. main.ts中代码
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { getAuthHeader } from './global'

const app = createApp(App)

// 挂载全局访问属方法获取
app.config.globalProperties.$getAuthheader = getAuthHeader()
app.use(router)
app.mount('#app')
  1. index.ts代码
//index.ts
/**定义一些全局方法和属性 */

/**获取登陆请求头 */
export const getAuthHeader = () => {
  return {
    Authorization: `Bearer ${localStorage.token || ''}`
  }
}
  1. HelloWorld.vue中使用
<template>
<h1>{{headers}}</h1>
</template>
<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  ref,
} from 'vue'

// 定义了全局方法之后需要扩充类型
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $getAuthheader: any
  }
}

export default defineComponent({
  setup() {
  	// const internalInstance = getCurrentInstance()
    // console.log(internalInstance)
    // 这种方法也可以获取到全局方法
    // console.log(internalInstance.appContext.config.globalProperties.$global)
	const { proxy } = getCurrentInstance()
    const headers = ref<string>(proxy.$getAuthheader)
  }
  return{
    headers
  }
})
</script>

这样$getAuthheader就不会抛红了

Logo

前往低代码交流专区

更多推荐