五、Vue3+Ts+Vite+AntdUI构建后台基础模板——VUEX与加载中
一、修改一些配置
//.eslintrc
module.exports = {
......
rules: {
......
'import/no-unresolved': [
...
],
//原有基础上加入以下
'no-param-reassign': [
'error',
{
props: true,
ignorePropertyModificationsFor: [
'state', // for vuex state
],
},
],
},
};
二、vuex加入loading模块
- store目录下的index.ts
// 文件地址:@/store/index.ts
// 前面这里有书写错误,
// 正确内容是:
import { createStore } from 'vuex';
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {},
});
- store目录下新建modules目录
- modules目录下新建loading.ts
// @/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;
- 修改store目录下的index.ts
import { createStore } from 'vuex';
import loading from '@/store/modules/loading';
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {
loading,
},
});
三、Layout加入加载中
<!--@/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>
<!--修改了以下部分-->
<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>
四、App.vue加入加载中
<!--@/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>
五、修改@/request/http.ts
import { message } from 'ant-design-vue';
import axios, { AxiosRequestConfig } from 'axios';
import store from '@/store';
import base from '@/request/base';
// 设置超时时间
const instance = axios.create({
timeout: 1000 * 10,
});
// 设置公共路径 和 Content-Type
instance.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('请求失败');
reject(err);
});
});
};
export default Fetch;
六、修改mokc/login.ts
- 加入响应延迟时间
- 加入success参数
// 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),
},
};
},
},
];
七、测试请求时的加载中
- 运行项目
- 访问http://localhost:3000/#/login
- 登录出现加载正常显示
- 完成VUEX与加载中开发
八、源代码地址
https://github.com/jiangzetian/vue3-admin-template
九、视频演示及源码
本文演示视频:点击浏览
更多前端内容欢迎关注公众号:天小天个人网
转载自:https://juejin.cn/post/7036933786407272484