webantd 全局数据共享示例

Posted 2022-05-03 极智视界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webantd 全局数据共享示例相关的知识，希望对你有一定的参考价值。

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

大家好，我是极智视界。本文示例以介绍 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', 
      ,
  ], 
  ,
];