vue3全局函数-用于全局使用getCurrentInstance

我们一般在vue3上挂在一些全局函数，都是基于globalProperties

import { createApp } from "vue";
import "@/style.css";
import App from "@/App.vue";
import router from "@/router/index";
import pinia from "@/store/index";
import i18n from "@/lang/index";

const app = createApp(App);

app.config.globalProperties.text = "挂载属性"; // 这里挂载

app.use(pinia);
app.use(router);
app.use(i18n);
app.mount("#app");

使用新挂载的属性

<script setup lang="ts">
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

const onSubmit = () => {
  console.log(proxy.text); // "挂载属性"
};
</script>

也就是说，我们所有的属性都在app.config.globalProperties这个上面，可以基于此封装一个全局的globalProperties，如下：

// useGlobalProperties.ts
// 用于全局使用globalProperties
import { getCurrentInstance, ComponentInternalInstance } from "vue";
export default () => (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;

页面使用：

<script setup lang="ts">
import useGlobalProperties from "@/hooks/useGlobalProperties";
const proxy = useGlobalProperties();

const onSubmit = () => {
  console.log(proxy.text); // "挂载属性"
};
</script>