标签：substractCount count useModel pro ant import model addCount

antpro 的umi内置的useModel也可以实现全局数据流
示例图: 三个组件的数量可以共享   使用方法 在src目录下models文件夹,新建一个文件,文件名就是引入的数据对象
1.   2.   完整代码 /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
  }
}

组件中使用 组件1 /src/pages/components1

import React from 'react';
import { useModel } from 'umi';
import { Descriptions, Button } from 'antd';

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="名称">T-shirt</Descriptions.Item>
      <Descriptions.Item label="价格">799</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>
  </>
};

组件2 /src/pages/components2

import React from 'react';
import { useModel } from 'umi';
import { Descriptions, Button } from 'antd';

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="名称">T-shirt</Descriptions.Item>
      <Descriptions.Item label="价格">799</Descriptions.Item>
      <Descriptions.Item label="数量">{count}</Descriptions.Item>
    </Descriptions>
    <h2>修改数据</h2>
    <Button type="primary" onClick={() => {addCount(2)}} style={{marginRight: '10px'}}>
      数量+2
    </Button>
    <Button type="primary" onClick={() => {substractCount(2)}}>
      数量-2
    </Button>
  </>
};

 

标签：substractCount,count,useModel,pro,ant,import,model,addCount
来源： https://www.cnblogs.com/steamed-twisted-roll/p/15207327.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。