ant.design-pro使用useModel傳遞全局數據

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>
  </>
};