vue3+ts使用app.config.globalProperties全局挂载实例方法,扩展模块解决ts类型检查报错
main.ts中代码// main.tsimport { createApp } from 'vue'import App from './App.vue'import router from './router'import { getAuthHeader } from './global'const app = createApp(App)// 挂载全局访问属方法获取app.config.gl
·
- 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')
- index.ts代码
//index.ts
/**定义一些全局方法和属性 */
/**获取登陆请求头 */
export const getAuthHeader = () => {
return {
Authorization: `Bearer ${localStorage.token || ''}`
}
}
- 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就不会抛红了
更多推荐
已为社区贡献1条内容
所有评论(0)