mobx记录用户登录状态（react）

新建userStatus.ts

import { makeAutoObservable } from 'mobx'
import { UserInfo } from '../types'

interface UserInfoStatus extends UserInfo{
  status:string
}

class UserStatus {
  userStatus: UserInfoStatus = {
    account: '',
    pwd: '',
    status:''
  }

  constructor() {
    makeAutoObservable(this)
  }

  setUserStatus = (status: UserInfoStatus) => {
    this.userStatus = status
    console.log(this.userStatus.account);
    
  }
}

const userStatus = new UserStatus()
export default userStatus

使用如下

登陆成功

store.userStatus.setUserStatus({ account: values.username, pwd: values.password, status: 'login'})

退出登录

store.userStatus.setUserStatus({ account: '', pwd: '', status: 'logout' })

可以用store.userStatus.userStatus.status做一些条件渲染，即登录后才可以看见的东西

 <Observer>
    {() => (
        { store.userStatus.userStatus.status === 'login' ? 
         (<div className={style.case1>case1</div>) : 
             (<div className={style.case2>case2</div>）
        }
     )}
 </Observer>

标签：status,account,登录,setUserStatus,userStatus,react,mobx,UserInfoStatus,store
来源： https://blog.csdn.net/jojo1001/article/details/121226538