vue3.0 挂载全局api 和 全局自定义方法 或 Provide、inject全局变量和方法

一、全局api

1、新建一个api文件

api.js

const BASE_URL = import.meta.env.VITE_BASE_API: // 环境变量
export const url = {
  LOGIN: `${BASE_URL}/api/login`, // 登录
  LOGIN_CODE: `${BASE_URL}/api/captchaImage`, // 获取验证码
}

2、在main.js中挂载到全局

main.js

import { createApp } from 'vue'
import App from './App.vue';
import router from './router';
import store from './store';
import { url } from './services/api'; // 导入封装的api

const app = createApp(App)
app.config.globalProperties.$http = url; // 挂载全局
app.use(router).use(store).mount('#app')

3、组件中使用

login.vue

4、console.log(http) 打印的结果如下：

二、自定义全局方法

1、新建一个modal.js文件

modal.js

/**
 * 
 * 提示弹窗
 */
export const toast = function (msg, duration) {
  duration = isNaN(duration) ? 2000 : duration; // 动画延迟
  var m = document.createElement('div');
  m.innerHTML = msg; // 提示语
  m.style.cssText = "min-width: 150px; padding: 10px;opacity: 0.7;color: rgb(255, 255, 255);text-align: center;border-radius: 5px;position: fixed;top: 50%;left: 50%;z-index: 999999;background: rgb(42, 168, 55);font-size: 12px;";
  document.body.appendChild(m);
  if(timer) {
    clearTimeout(timer)
  }
  var timer = setTimeout(function () {
    var d = 0.5;
    m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
    m.style.opacity = '0';
    if(cssTimer) {
      clearTimeout(cssTimer)
    }
    var cssTimer = setTimeout(function () {
      document.body.removeChild(m)
    }, d * 1000);
  }, duration);
}
export default toast

2、在main.js中挂载到全局

main.js

import { createApp } from 'vue'
import App from './App.vue';
import router from './router';
import store from './store';
import { url } from './services/api'; // 导入封装的api
import toast from './utils/modal';

const app = createApp(App)
app.config.globalProperties.$http = url; // 挂载全局
app.config.globalProperties.$toast = toast; // 挂载全局自定义弹窗
app.use(router).use(store).mount('#app')

3、组件中使用

login.vue

4、console.log(toast)打印结果如下：

5、不经意间看到大佬的文章：https://blog.csdn.net/Boale_H/article/details/118857338， 还有另一种方法：

main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index.js';
import store from './store';
import { url } from './services/api.js'; // 导入封装的api
import {changeSize} from './utils/common.js';
import toast from './utils/modal.js';
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
import './assets/common/style.less';
import 'animate.css';

changeSize()
const app = createApp(App)
app.config.globalProperties.$http = url; // 挂载全局
app.provide('toast', toast); // 调用 provide 来定义每个property(toast)
app.use(antd).use(router).use(store).mount('#app')

home.vue

6、自定义组件可以这样玩，全局api变量也是可以的，挂载代码太多太麻烦了，在app.vue中提供依赖

App.vue
import { onMounted,provide } from "vue";
import { url } from './services/api.js'; // 导入封装的api
provide('url',url)

7、在组件中注入依赖

login.vue
const url = inject('url')
// 获取验证码
const getCode = async () => {
  await request(url.LOGIN_CODE, 'get')
    .then((res) => {
        codeImg.value = res.img;
        captcha.value = res.captcha;
        uuid.value = res.uuid;
    })
    .catch(() => {

    })
    .finally(() => {
      
    })
}

8、官方文档：https://v3.cn.vuejs.org/guide/composition-api-provide-inject.html#%E4%BD%BF%E7%94%A8-provide

2022年，努力做自己！