uniapp使用Vue3 挂载全局方法

在uni-app中，全局API来挂载方法函数到全局是一种减少代码重复性，提高性能的非常常见的方法。

首先，我们需要先去简单了解一下uniapp中 main.js 文件中的代码含义：

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()
// #endif


// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	return {
		app
	}
}
// #endif

在最初代码设计中，为了兼容不同版本的Vue，确保能同时在Vue2和Vue3中运行，采用了不同的初始化方式，并通过 // #ifdef VUE3 进行环境判断初始化。 

当然，在不同的Vue环境中挂载全局的方法，理所当然的会有所不同，因为 Vue 3 不再使用 Vue.prototyp ，而是通过 app.config.globalProperties 来定义全局方法或属性，将全局函数挂载到Vue实例上。

以下是修改后的代码（Vue3环境下挂载全局方法）：

// #ifdef VUE3
import { createSSRApp } from 'vue'
import request from '@/utils/request.js'
import notify from '@/utils/notify.js'

export function createApp() {
  const app = createSSRApp(App)
  
   // 挂载全局方法 网络请求 消息提示
  app.config.globalProperties.$request = request
  app.config.globalProperties.$notify = notify
  
  return {
    app
  }
}
// #endif

然后，我们就可以在页面中使用这个全局方法： getCurrentInstance().proxy 

onLoad() {
	this.$notify.toast('普通提示');
    console.log(this.$request);
},

值得注意的是：在Vue3的 setup() 中，不可以直接访问 this ,需要通过访问 getCurrentInstance().proxy 全局方法。