umijs不用dva怎么单独使用model

umijs官方文档很少,看了一下model

#src/models/store.ts
import { useState, useCallback } from 'react'
export default () => {
    const [user, setUser] = useState({})
    const setUserData = useCallback((account, password) => {
        setUser(function(){return ({ account: account, password: password })})
    }, [])
    return { user, setUserData }
}

#pages/index.tsx
  import styles from './index.less';
  import { useModel,Models } from 'umi';
  import { Button } from 'antd';
  
  export default function IndexPage() {
    const { user, setUserData } = useModel('store')
    console.log(user)
      return (
        <div>
         <h1 className={styles.title}>Page index</h1>
         <button onClick={()=>setUserData('aaaa','bbbbb')}>setUserData</button>
       </div>
     );
  }


下面这个是官方的示例,我也下载看了一下,有一点点小改动

#src/models/conter.ts
import { useState ,useCallback} from 'react';

export default () => {
  const [counter, setCounterdd] = useState(0);
  const increment = useCallback(
    ()=>setCounterdd(function(c){
      return c+1
    })
    ,[]);
  const decrement = () => setCounterdd(c => c - 1);
  return { counter, increment, decrement };
};


#pages/index.tsx
  import styles from './index.less';
  import { useModel,Models } from 'umi';
  import { Button } from 'antd';
  
  export default function IndexPage() {
     const fullRet = useModel('counter');
     const partialRet= useModel('counter', c=>c.counter);
  
      return (
        <div>
         <h1 className={styles.title}>Page index</h1>
         {partialRet}
         <button onClick={fullRet.increment}>add</button>
         <button onClick={fullRet.decrement}>minus</button>
       </div>
     );
  }







Tags js,javascript

留言(0)

评论