First, modify some configurations

//.eslintrc
module.exports = {
    ......
    rules: {...'import/no-unresolved': [...]. .// Add the following to the original base
        'no-param-reassign': [
            'error',
            {
                props: true.ignorePropertyModificationsFor: [
                    'state'.// for vuex state],},],},};Copy the code

2. Vuex joins the loading module

  1. Index. ts in the store directory
// The file address is @/store/index.ts
// There is a typo here,
// The correct content is:
import { createStore } from 'vuex';

export default createStore({
    state: {},
    mutations: {},
    actions: {},
    modules: {},});Copy the code
  1. Create a modules directory in the store directory
  2. Create load.ts in the modules directory
// @/store/modules/loading.ts
const loading = {
    namespaced: true.state: {
        loadingState: false,},getters: {},
    mutations: {
        showLoading(state) {
            state.loadingState = true;
        },
        hideLoading(state) {
            state.loadingState = false; }},actions: {}};export default loading;
Copy the code
  1. Example Modify index.ts in the store directory
import { createStore } from 'vuex';
import loading from '@/store/modules/loading';

export default createStore({
    state: {},
    mutations: {},
    actions: {},

    modules: {
        loading,
    },
});
Copy the code

3. Add Layout to loading

<! --@/layout/index.vue-->
<template>
    <a-layout class="layout">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>.</a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0 20px">.</a-layout-header>
            <! -- Modified the following part -->
            <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
                <a-spin :spinning="$store.state.loading.loadingState" :delay="300" size="large">
                    <router-view />
                </a-spin>
            </a-layout-content>
            <! ---->
        </a-layout>
    </a-layout>
</template>
<script lang="ts">.</script>
<style lang="less" scoped>.</style>

Copy the code

Iv. App.vue is added to the loading process

<! --@/App.vue-->
<template>
    <layout v-if="$route.meta.layout" />
    <a-spin :spinning="$store.state.loading.loadingState" :delay="300" size="large" v-else>
        <router-view />
    </a-spin>
</template>

<script lang="ts">.</script>

<style lang="less">
#app {
    width: 100%;
    height: 100%;
}
.ant-spin-nested-loading..ant-spin-container {
    width: 100%;
    height: 100%;
}
.ant-spin {
    max-height: unset ! important;
}
</style>

Copy the code

@/request/http.ts

import { message } from 'ant-design-vue'; import axios, { AxiosRequestConfig } from 'axios'; import store from '@/store'; import base from '@/request/base'; // Set timeout time const instance = axios.create({timeout: 1000 * 10,}); / / set the path and the content-type instance. The defaults. BaseURL = base. BaseURL; interface AxiosConfig extends AxiosRequestConfig { loading? : boolean; } const Fetch = ({ url = '', method = 'GET', data = {}, params = {}, headers = { 'Content-Type': 'application/json', }, loading = true, }: AxiosConfig) => { if (loading) { // loading store.commit('loading/showLoading'); } return new Promise((resolve, reject) => { instance({ url, method, data, params, headers, }) .then((res) => { store.commit('loading/hideLoading'); resolve(res.data.data); }) .catch((err) => { store.commit('loading/hideLoading'); Message. error(' request failed '); reject(err); }); }); }; export default Fetch;Copy the code

Modify mokc/login.ts

  1. Add response delay time
  2. Add the SUCCESS parameter
// mokc/login.ts
import Mock from 'mockjs';

export default [
    {
        // http://mockjs.com/examples.html
        url: '/mock/api/login',
        method: 'post',
        timeout: 500,
        // statusCode: 500,
        response: ({ body }) => {
            return {
                code: 200,
                success: true,
                message: 'ok',
                data: {
                    // query: body,
                    token: Mock.Random.string('lower', 200),
                },
            };
        },
    },
];

Copy the code

Test request loading

  1. Run the project
  2. Go to http://localhost:3000/#/login
  3. The normal loading is displayed during login
  4. Complete VUEX and loading development

Eight, source code address

https://github.com/jiangzetian/vue3-admin-template
Copy the code

Nine, video demonstration and source code

Demo video of this article: Click browse

More front-end content welcome to pay attention to the public number: day small day personal network