配置文件config.ts
import { defineConfig } from 'umi';
import RouterConfig from './router.config';
export default defineConfig({
/** 浏览器路由配置 **/
history: { type: 'browser' },
/** 路由配置 */
routes: {
path: '/',
component: './index'
},
/** 引用路径配置 */
alias: {
constants: '@/constants/',
utils: '@/utils/',
services: '@/services/',
assets: '@/assets/',
},
/** umi插件 */
antd: {},
dva: {
hmr: true,
},
/** 按需加载 */
dynamicImport: false,
title: '',
});
状态管理 model.ts
import { Effect, Reducer, Subscription } from 'umi';
/**
* 全局State状态
*/
interface ModelState {
xxx: string;
}
/**
* 接口类型
*/
interface ModelType {
namespace: 'index';
state: ModelState;
effects: {
yy: Effect;
};
reducers: {
updateS: Reducer<ModelState>;
};
subscriptions?: { setup: Subscription };
}
const Model: ModelType = {
namespace: 'index',
state: {
xxx: ''
},
effects: {
*yy({ payload }, { put, call, select }) { }
},
reducers: {
updateS(state, { payload: { xxx } }) {
return {
...state,
xxx
}
}
},
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {
if (pathname === '/user') {
dispatch({
type: 'updateS',
})
}
});
}
}
}
export default Model;
用户反馈工具库
用于全局提示用户
下面例子为message提示⇒ 更多antd提示
/** 事件总线 */
import { EventEmitter } from 'events';
import { message } from 'antd';
message.config({
top: 100,
duration: 2,
maxCount: 1,
});
/**
* message.error()提示
*/
fEventEmitter.addListener('f.event.message.error', (content, resolve, reject) => {
message.error(content).then(resolve, reject);
});
export const messageError = (content: string) => {
return new Promise((resolve) => {
fEventEmitter.emit('f.event.message.error', content, resolve);
});
};
引入更改 可以在umi中直接引用
import { all } from ‘umi’;