Vue3 封装组件库 挂载全局

问题

我是看网上大部分说的Vue2.x的 Vue.prototype 应该换成以下写法

import toast from './scripts/toast';
import { createApp } from 'vue'
import App from './App.vue'
export default {
  version: '1.0.0',
  author: 'lzh',
  install: function (Vue) {
    const app = createApp(App);
    app.config.globalProperties.$toast = toast;
  }
}

import { getCurrentInstance, onMounted } from "vue";
export default {
  setup( ) {
    const { ctx } = getCurrentInstance(); //获取上下文实例
    onMounted(() => {
      console.log(ctx, "ctx");
      ctx.$toast('测试');
    });
  },
};

但是结果并不能使用

报错信息

$toast is undefined

于是我想起了Vue.use默认执行插件的install方法并传入Vue当前实例
所以我打印了一下Vue

打印结果

发现了端倪
然后将代码改成这样就可以啦

import toast from './scripts/toast';
export default {
  version: '1.0.0',
  author: 'lzh',
  install: function (Vue) {
    // toast Fn
    Vue.config.globalProperties.$Toast = toast;
  }
}

注意：使用getCurrentInstance()时候要注意尽量别使用里边的ctx属性 打包后容易出错，尤大大推荐使用内部的 proxy

    const { proxy } = getCurrentInstance();
    proxy.$toast('测试成功');