umi4中使用modal的方式
时间: 2023-08-28 20:03:20 浏览: 50
在 umi4 中,可以使用 `@umijs/plugin-model` 插件来管理全局状态,包括使用 modal 的方式。具体步骤如下:
1. 安装 `@umijs/plugin-model` 插件:
```bash
npm install @umijs/plugin-model --save-dev
```
2. 在 `.umirc.ts` 中配置插件:
```typescript
export default {
// ...
plugins: ['@umijs/plugin-model'],
};
```
3. 创建一个 modal 文件,例如 `src/models/user.ts`:
```typescript
import { Effect, Reducer } from 'umi';
export interface UserModelState {
name: string;
}
export interface UserModelType {
namespace: 'user';
state: UserModelState;
effects: {
fetch: Effect;
};
reducers: {
save: Reducer<UserModelState>;
};
}
const UserModel: UserModelType = {
namespace: 'user',
state: {
name: '',
},
effects: {
*fetch(_, { call, put }) {
// 请求用户信息
const data = yield call(fetchUser);
// 更新用户信息
yield put({
type: 'save',
payload: data,
});
},
},
reducers: {
save(state, { payload }) {
return {
...state,
...payload,
};
},
},
};
export default UserModel;
function fetchUser() {
return Promise.resolve({ name: 'Tom' });
}
```
4. 在页面中使用 `useModel` 函数来访问 modal 数据:
```tsx
import { useModel } from 'umi';
import styles from './index.less';
export default function IndexPage() {
const { initialState, loading, error } = useModel('user');
const { name } = initialState;
return (
<div className={styles.container}>
{loading ? (
<div>Loading...</div>
) : error ? (
<div>Error: {error.message}</div>
) : (
<div>Hello, {name}!</div>
)}
</div>
);
}
```
通过上面的步骤,就可以在 umi4 中使用 modal 来管理全局状态了。