Sivo 悉见

Vue全局变量

匿名 · 更新于 2020/4/22

TypeScript模式全局变量实现

方案一:自定义全局配置文件myconfig.ts
第1步:在src目录下创建common公共目录,在common下创建一个存放全局配置的ts文件myconfig.ts

class MyConfig {
  serverSrc = 'www.baidu.com'
  myToken = '12345678'
  hasEnter = false
  userSite = '中国钓鱼岛'
}

export default MyConfig

第2步:在main.ts中,挂载全局配置文件
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import MyFun from './common/myconfig' //引入全局配置
Vue.config.productionTip = false

new Vue({   router,   store,   render: h => h(App) }).$mount('#app')

Vue.prototype.$myConfig = new MyConfig() //挂载全局配置


 第3步:在任意组件中使用this.$myConfig.自定义变量名即可调用,例如本示例中,使用this.$myConfig.userSite即可