vue3 定义使用全局变量的示例详解

import { createApp } from 'vue'
import App from './App.vue'
//  引入element
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入router
import router from './route/index'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
// 定义全局变量
app.config.globalProperties.$key= "这是一个全局变量";
app.mount('#app')

import {getCurrentInstance} from 'vue'
const internalInstance = getCurrentInstance()
//  全局变量
let global=internalInstance.appContext.config.globalProperties;
console.log(global.$key)

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.config.globalProperties.$global_id=10;
app.config.globalProperties.$global_name="test";
app.provide('global_code', "code");
app.config.globalProperties.global_value="value";
app.mount('#app');

<template>
  <main>
    <button @click="clicked">全局变量</button>
  </main>
</template>
<script>
import {inject, getCurrentInstance } from 'vue'
export default {
  setup () {
    const { proxy } = getCurrentInstance();
    const codec = inject("global_code");
    function clicked(params) {
      console.log(proxy.$systemId)
      console.log("global_id:",proxy.$global_id)
      console.log("global_name:",proxy.$global_name);
      console.log("global_value:",proxy.global_value);
      console.log("codec:", codec);
    }
    return {clicked}
  }
}
</script>
<!-- <script setup>
//setup的实现
import { inject,getCurrentInstance  } from 'vue'
const codec = inject("global_code");
const instance = getCurrentInstance();
function clicked()
{
  console.log("test");
  console.log("global_id:",instance.appContext.config.globalProperties.$global_id)
  console.log("global_name:",instance.proxy.$global_name);
  console.log("global_value:",instance.proxy.global_value);
  console.log("codec:", codec);
}
</script>  -->