VUE3（十三）main.ts中全局引入axios

VUE2中可以將我們需要的插件掛載到VUE的主鏈上（配置成全局屬性），然后通過this調用，但是在VUE3的ts中使用這樣的配置方法的話是沒法通過編譯的，這個時候我們就需要拓展屬性。

// 下面是在vue3.0定義源文件找到的一段說明注釋
/**
 * Custom properties added to component instances in any way and can be accessed through `this`
 *
 * @example
 * Here is an example of adding a property `$router` to every component instance:
 * ```ts
 * import { createApp } from 'vue'
 * import { Router, createRouter } from 'vue-router'
 *
 * declare module '@vue/runtime-core' {
 *   interface ComponentCustomProperties {
 *     $router: Router
 *   }
 * }
 *
 * // effectively adding the router to every component instance
 * const app = createApp({})
 * const router = createRouter()
 * app.config.globalProperties.$router = router
 *
 * const vm = app.mount('#app')
 * // we can access the router from the instance
 * vm.$router.push('/')
 * ```
 */
}

vue3.x+typescript 配置全局axios屬性

import { createApp } from 'vue'
import App from './App.vue'
import route from './route'
//配置Antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
 
//配置請求數據
import {AxiosInstance } from "axios";
import Axios from "axios";
 
//全局配置Axios
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
      $axios: AxiosInstance;
    }
}
let app=createApp(App)
app.config.globalProperties.$axios=Axios;  //this.Axios
app.use(route)
app.use(Antd)
app.mount('#app')

main.js

// 引入vue3中vue框架的createApp這個方法，創建一個實例
import { createApp } from "vue";
// 引入vuex
import store from "/@/store";
 
// ======================================================
// 引入路由
import { Router } from 'vue-router'
import router from "/@/router";
 
// import ElementPlus from 'element-plus';
// import '../node_modules/element-plus/lib/theme-chalk/index.css';
// import Antd from "ant-design-vue";
// import "../node_modules/ant-design-vue/dist/antd.css";
 
//配置請求數據
import { AxiosInstance } from "axios";
// 引入自定義封裝的axios
import axios from "./hooks/axios";
 
// =======================================================
//全局配置axios，router （typescript使用）
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $axios: AxiosInstance;
        $router: Router;
    }
}
 
import App from "/@/App.vue";
 
// 創建實例
const app = createApp(App);
app.use(router);
app.use(store);
 
// =======================================================
// vue3版本的全局函數
// === Vue.prototype.name = 'vue2'
app.config.globalProperties.$axios = axios;  
app.config.globalProperties.$router = router;
// 調用
/**
    import {getCurrentInstance,} from "vue";
    //獲取上下文實例，ctx=vue2的this
    const { ctx } = getCurrentInstance();
    ctx.$router.push('/xxx/xxxx');
 */
 
// =======================================================
// 加載UI框架
// app.use(Antd);
// app.use(ElementPlus);
 
// 將實例掛載至節點
app.mount("#app");

全局axios使用：

Index.ts

import {
    PropType,
    ref,
    watch,
    reactive,
    toRefs,
    getCurrentInstance,
    provide,
    inject,
    onBeforeMount,// 在組件掛載之前執行的函數
    onMounted,
    onBeforeUpdate,// 在組件修改之前執行的函數
    onUpdated,
    onBeforeUnmount,// 在組件卸載之前執行的函數
    onUnmounted,
    nextTick
} from "vue";
// 引入axios鈎子
import axios from "/@/hooks/axios.ts";
// 引入路由
import { useRouter, useRoute } from "vue-router";
 
// 引入各個自定義組件
import HelloWorld from "/@/components/HelloWorld.vue";
import Footer from "/@/components/pc/Footer.vue";
import Header from "/@/components/pc/Header.vue";
import Menu from "/@/components/pc/Menu.vue";
import load from "/@/components/pc/loading.vue";
import TopIM from "/@/components/pc/TopIM.vue";
import Drawer from "/@/components/pc/Drawer.vue";
import Pagination from "/@/components/pc/Pagination.vue";
 
// 引入公共js文件
import utils from "/@/assets/js/public/function";
// 公共狀態文件
import { common } from "/@/hooks/common.ts";
export default {
    name: "index",
    components: {
        HelloWorld,
        Footer,
        Header,
        Menu,
        load,
        TopIM,
        Drawer,
        Pagination,
    },
    // VUE3 語法 第一個執行的鈎子函數
    // setup官方文檔 ：https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#參數
    // setup(props: any, content: any) {
    setup(props: any, content: any) {
        const router = useRouter();
        const route = useRoute()
        //獲取上下文實例，ctx=vue2的this
        const { ctx,proxy } = getCurrentInstance();
        /**
         * @name: 聲明data
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-10 
         */
        const data = reactive({
            // 展示menu
            showRef: 0,
            // 全局參數
            glabl: common.glabl,
            // loading 是否顯示
            loading: true,
            // 文章列表
            articleList:[],
            // 數據頁數
            articlePage:0,
            // 當前頁
            currentPage: route.query.page ? route.query.page : 1,
            // 分頁顯示頁碼數
            dataNum:7,
            // 查詢條件
            search:'search',
            // 數據總條數
            dataDatanum:'',
        });
        /**
         * @name: 獲取頁面數據
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-13 
         * @param:  data    type    description
         * @return: data    type    description
         */
        const getData = (sign:string = '') => {
            // 文檔 ：http://www.axios-js.com/zh-cn/docs/
            let param = {
                page: data.currentPage
            };
            data.loading = true;
            proxy.$axios.get('/index.php/index/getdata', { params: param})
            //axios.get('/index.php/index/getdata', { params: param })
            .then(function (response:any) {
                data.articlePage = response.data.articlePage;
                data.articleList = response.data.articleShow;
                data.dataDatanum = response.data.dataDatanum;
                data.loading = false;
 
                // 回到滾動條刷新前位置
                if (sign)
                {
                    let currectWidth = window.screen.height;
                    if (currectWidth == 1080)
                    {
                        utils.goToScrollTop(968);
                    }
                    else
                    {
                        utils.goToScrollTop(650);
                    }
                }
                else
                {
                    utils.goToScrollTop();
                }
            })
            .catch(function (error:any) {});
        }
 
        
        // 初始調用
        getData();
 
        /**
         * @name: 將data綁定值dataRef
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-10 
         */
        const dataRef = toRefs(data);
        return {
            getData,
            ...dataRef
        }
    },//*/
};

當然，官方是不建議將axios或者router這些插件掛載到主鏈上的，因此，我這里只是嘗試了一下這樣的可能，但是不建議這樣使用。

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：