umi 项目全局状态管理

如何使用 useModel 管理数据流的 Umi 项目教程

使用 useModel 管理数据流是 Umi 项目中一种常见的方式，它可以简化数据流的管理和共享状态。以下是一篇使用 useModel 的教程，
官方使用教程
在 Umi 项目中，您可以使用 useModel 钩子来轻松管理和共享应用程序的数据流。本教程将指导您如何设置和使用 useModel 来管理应用程序的状态。

步骤 1：创建 Umi 项目

首先，确保您已经创建了一个 Umi 项目。如果您还没有创建，可以使用以下命令初始化一个新的 Umi 项目：

umi create my-umi-app

进入项目目录：

cd my-umi-app

1. 下载插件 npm i ‘@umijs/plugins/dist/model’ ，有需要的可以下载 @umijs/plugins/dist/initial-state
2. 修改配置文件.umirc.ts

import { defineConfig } from 'umi';
export default defineConfig({
  npmClient: 'yarn',
  plugins: [
    '@umijs/plugin-electron',
    '@umijs/plugins/dist/model',
  ],
  model: {},
});

步骤 2：创建数据模型

使用 useModel 钩子需要一个数据模型，该模型定义了您的应用程序的状态和操作。在 Umi 项目中，您可以在 src/models 目录下创建这些数据模型。

例如，我们创建一个 user.js 模型：

// src/models/userModel.ts
export default function Page() {
    const user = {
        username: 'umi',
    };

    return { user };
};

步骤 3：使用 useModel 钩子

现在，您可以在任何组件中使用 useModel 钩子来访问和操作数据模型的状态。假设我们有一个名为 UserComponent.js 的组件，它想要访问和显示用户的名称和年龄：

// src/pages/UserComponent.ts
import React from 'react';
import { useModel } from 'umi';

export default function UserComponent() {
  const user = useModel('user'); // 使用 useModel 钩子获取数据模型

  return (
    <div>
      <h1>User Component</h1>
      <p>Name: {user.state.name}</p>
      <p>Age: {user.state.age}</p>
    </div>
  );
}

步骤 4：在页面中使用组件

最后，您需要在页面中使用 UserComponent 组件，以便在浏览器中查看它。在 Umi 项目中，您可以在路由配置中定义页面。

// config/config.js
export default {
  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/user', component: '@/pages/UserComponent' }, // 添加用户页面路由
  ],
};

步骤 5：运行应用程序

现在您已经设置了数据模型和组件，您可以启动您的 Umi 应用程序并访问 UserComponent 页面：

umi dev

打开浏览器并访问 http://localhost:8000/user，您将看到显示用户名称和年龄的页面。

结论

使用 useModel 钩子是在 Umi 项目中管理数据流的简单而强大的方式。它允许您轻松地访问和操作数据模型的状态，以及在整个应用程序中共享状态。

本教程提供了一个基本的示例，您可以根据自己的项目需求扩展和调整数据模型和组件。希望这个教程对帮助您开始使用 useModel 在 Umi 项目中管理数据流有所帮助。