问答

vue3 + typescript 中,定义了一个全局变量,获取该值时却总报错

作者:admin 2021-05-07 我要评论

// main.ts 文件import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import './styles/main...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
// main.ts 文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import './styles/main.scss'

const app = createApp(App)

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

// 定义全局变量
app.config.globalProperties.$http = 'xxxxx'

在 home.vue 文件中引入 getCurrentInstance(),获取 vue 实例,通过该函数返回的 ctx,获取刚才定义的全局变量;
image.png

<!-- home.vue -->
<template></template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, getCurrentInstance } from 'vue'

export default defineComponent({
  name: '',
  components: {},
  setup() {
    console.log(getCurrentInstance().ctx)    // 会报错,没有 ctx 属性
    const { ctx } = getCurrentInstance()    // 一旦使用解构定义 ctx 时,ctx 就会报错
    
    return {}
  }
})
</script>

不知是 typescript 的问题还是 vue 的问题,但是不知道怎么修改,望路过大佬指点。
image.png
image.png

###
import { getCurrentInstance } from 'vue'

const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance()

    internalInstance.appContext.config.globalProperties // access to globalProperties
  }
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue3 + typescript 中,定义了一个全局

    vue3 + typescript 中,定义了一个全局

  • vue搜索节流为什么第一种方法不可以呢,

    vue搜索节流为什么第一种方法不可以呢,

  • css粘性定位的问题

    css粘性定位的问题

  • 【移动端】h5页面要求兼容各种机型一屏

    【移动端】h5页面要求兼容各种机型一屏

腾讯云代理商
海外云服务器