vue3挂载axios挂载全局方法

上官孜然2024-03-29 14:08

vue3中在

javascript 复制代码

// main.js

import axios from "axios";
app.provide("$axios", axios);

app.mount("#app");

javascript 复制代码

// Home.vue
import {  inject } from "vue";
const http = inject("$axios");

const getUser = () => {
  http
    .post(
      "/getEmployeeBaseInfo",
      {
        empNumber: "12345",
      },
      { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
    )
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
    .finally(function () {
      // 总是会执行
    });
};

provide 和 inject 主要为高阶插件/组件库提供用例。

并不推荐直接用于应用程序代码中。

定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情。

provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。

inject ：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。

一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。