极智开发 | antd 全局数据共享示例

欢迎关注我的公众号 [极智视界]，获取我的更多笔记分享

大家好，我是极智视界。本文示例以介绍 antd 全局数据共享的使用方式。

antd 是西湖区最具影响力的 web 设计规范，是基于 umi 封装的一套企业级中后台前端 / 设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼典型模板 / 业务组件 / 配套设计资源，进一步提升企业级中后台产品设计研发过程中的用户和设计者的体验。

这里咱们来体验一下 antd 的全局数据共享。中后台场景下，绝大多数页面的数据流转都是在当前页完成，在页面挂载的时候请求后端接口获取并消费，这种场景下并不需要复杂的数据流方案。但是也存在需要全局共享的数据，如用户的角色权限信息或者其他一些页面间共享的数据。那么怎么才能缓存并支持在多个页面直接去共享这部分数据呢。为了实现在多个页面中的数据共享，以及一些业务可能需要的简易的数据流管理的场景，antd 基于 hooks & umi 插件实现了一种轻量级的全局数据共享的方案。

下面开始。

1、新建 Model

// src/models/product.ts
import {useState, useCallback } from 'react'

export default () => {
  const [count, setCount] = useState(0)

  // 增加数量
  const addCount = useCallback((val: number = 1) => {
    setCount((pre) => {return pre + val})
  }, [])

  // 减少数量
  const substractCount = useCallback((val: number = 1) => {
    setCount((pre) => {return pre - val})
  }, [])

  return {
    count, 
    addCount,
    substractCount
  }
}

2、使用 Model

// src/pages/components/components1.js
import React from "react";
import { useModel } from 'umi';
import { Descriptions, Button } from "antd";
import { DescriptionsItemProps } from "@ant-design/pro-descriptions";

export default () => {
    const {count, addCount, substractCount } = useModel('product', model => (
        {
            count: model.count,
            addCount: model.addCount,
            substractCount: model.substractCount,
        }
    ))

    return <>
    <h2>结算</h2>
    <Descriptions title = "商品信息">
        <Descriptions.Item label = "名称">basketball</Descriptions.Item>
        <Descriptions.Item label = "价格">888</Descriptions.Item>
        <Descriptions.Item label = "数量">{count}</Descriptions.Item>
    </Descriptions>
    <h2>修改数据</h2>
    <Button type="primary" onClick={() => addCount()} style={{marginRight: '10px'}}>
        数量+1
    </Button>
    <Button type="primary" onClick={() => substractCount()}>
        数量-1
    </Button>
    </>
};


// src/pages/components/components2.js
import React from "react";
import { useModel } from 'umi';
import { Descriptions, Button } from "antd";
import { DescriptionsItemProps } from "@ant-design/pro-descriptions";

export default () => {
    const {count, addCount, substractCount } = useModel('product', model => (
        {
            count: model.count,
            addCount: model.addCount,
            substractCount: model.substractCount,
        }
    ))

    return <>
    <h2>结算</h2>
    <Descriptions title = "商品信息">
        <Descriptions.Item label = "名称">basketball</Descriptions.Item>
        <Descriptions.Item label = "价格">888</Descriptions.Item>
        <Descriptions.Item label = "数量">{count}</Descriptions.Item>
    </Descriptions>
    <h2>修改数量</h2>
    <h3></h3>
    <Button type="primary" onClick={() => addCount()} style={{marginRight: '10px'}}>
        数量+1
    </Button>
    <Button type="primary" onClick={() => substractCount()}>
        数量-1
    </Button>
    <h3></h3>
    <Button type="primary" onClick={() => addCount(5)} style={{marginRight: '10px'}}>
        数量+5
    </Button>
    <Button type="primary" onClick={() => substractCount(5)}>
        数量-5
    </Button>
    </>
};

3、路由

// config/routes.ts
export default [
  {
    path: '/',
    redirect: '/welcome',
  },
  {
    path: '/user',
    layout: false,
    routes: [
      {
        name: 'login',
        path: '/user/login',
        component: './user/Login',
      },
      {
        component: './404',
      },
    ],
  },
  ...
  // components
  { 
    path: '/components', 
    name: 'components', 
    icon: 'user', 
    routes: [ 
      { 
          path: '/components/components1', 
          name: 'components1', 
          component: './components/components1', 
      },
      { 
        path: '/components/components2', 
        name: 'components2', 
        component: './components/components2', 
      },
  ], 
  },
];

4、页面展示

在本示例中，数量的数据是全局共享的，从下面的演示动画你可以看到，在页面 components1 和页面 components2 中的商品数量数据是共享的。

以上分享了 antd 全局数据共享示例，希望我的分享能对你的学习有一点帮助。

【公众号传送】

《【web】antd 全局数据共享示例》