In VUE2 we can mount the plugin to the main chain of VUE (configured as a global property) and call this, but in TS of VUE3 this configuration method will not pass compilation, so we need to extend the property.

// Here is an explanatory note found in the Vue3.0 definition source file
/**
 * 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('/')
 * ```
 */
}
Copy the code

Vue3. X +typescript configures global AXIOS attributes

import { createApp } from 'vue'
import App from './App.vue'
import route from './route'
/ / configuration Antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
 
// Configure the request data
import {AxiosInstance } from "axios";
import Axios from "axios";
 
// Configure Axios globally
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')
Copy the code

main.js

// Create an instance by introducing the createApp method of the Vue framework in VUe3
import { createApp } from "vue";
/ / introduce vuex
import store from "/@/store";
 
/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Import routes
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";
 
// Configure the request data
import { AxiosInstance } from "axios";
// Introduce custom encapsulation axios
import axios from "./hooks/axios";
 
/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Configure axios, router globally (using typescript)
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $axios: AxiosInstance; $router: Router; }}import App from "/@/App.vue";
 
// Create an instance
const app = createApp(App);
app.use(router);
app.use(store);
 
/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Vue3 global functions
// === Vue.prototype.name = 'vue2'
app.config.globalProperties.$axios = axios;  
app.config.globalProperties.$router = router;
/ / call
/** import {getCurrentInstance,} from "vue"; CTX =vue2 this const {CTX} = getCurrentInstance(); ctx.$router.push('/xxx/xxxx'); * /
 
/ / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
// Load the UI frame
// app.use(Antd);
// app.use(ElementPlus);
 
// Mount the instance to the node
app.mount("#app");
Copy the code

Global AXIos uses:

Index.ts

import {
    PropType,
    ref,
    watch,
    reactive,
    toRefs,
    getCurrentInstance,
    provide,
    inject,
    onBeforeMount,// The function executed before the component is mounted
    onMounted,
    onBeforeUpdate,// The function executed before the component is modified
    onUpdated,
    onBeforeUnmount,// The function executed before the component is unloaded
    onUnmounted,
    nextTick
} from "vue";
// Introduce the axios hook
import axios from "/@/hooks/axios.ts";
// Import routes
import { useRouter, useRoute } from "vue-router";
 
// Introduce custom components
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";
 
// Introduce a public js file
import utils from "/@/assets/js/public/function";
// Public status file
import { common } from "/@/hooks/common.ts";
export default {
    name: "index".components: {
        HelloWorld,
        Footer,
        Header,
        Menu,
        load,
        TopIM,
        Drawer,
        Pagination,
    },
    VUE3 syntax is the first hook function to execute
    / / setup the official document: https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html# parameters
    // setup(props: any, content: any) {
    setup(props: any, content: any) {
        const router = useRouter();
        const route = useRoute()
        // Get the context instance, CTX = this of vue2
        const { ctx,proxy } = getCurrentInstance();
        / * * *@name: declare data *@author: camellia
         * @email: guanchao_gc@qq.com
         * @date: the 2021-01-10 * /
        const data = reactive({
            / / display the menu
            showRef: 0.// Global parameters
            glabl: common.glabl,
            // loading Whether to display
            loading: true.// List of articles
            articleList: [].// Number of data pages
            articlePage:0./ / the current page
            currentPage: route.query.page ? route.query.page : 1.// Display page numbers in pages
            dataNum:7.// Query conditions
            search:'search'.// Total number of entries
            dataDatanum:' '});/ * * *@name: Get page data *@author: camellia
         * @email: guanchao_gc@qq.com
         * @date: 2021-01-13 
         * @param:  data    type    description
         * @return: data    type    description
         */
        const getData = (sign:string = ' ') = > {
            // Document: 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;
 
                // Return to the position before the scrollbar refreshes
                if (sign)
                {
                    let currectWidth = window.screen.height;
                    if (currectWidth == 1080)
                    {
                        utils.goToScrollTop(968);
                    }
                    else
                    {
                        utils.goToScrollTop(650); }}else
                {
                    utils.goToScrollTop();
                }
            })
            .catch(function (error:any) {});
        }
 
        
        // Initial call
        getData();
 
        / * * *@name: binds data to the value dataRef *@author: camellia
         * @email: guanchao_gc@qq.com
         * @date: the 2021-01-10 * /
        const dataRef = toRefs(data);
        return{ getData, ... dataRef } },/ / * /
};
Copy the code

Of course, it’s officially not recommended to mount axios or Router plug-ins on the main chain, so I’m just experimenting with the possibility here, but not recommending it.

For good suggestions, please enter your comments below.

Welcome to my blog guanchao.site

Welcome to applets: