标签：status account 登录 setUserStatus userStatus react mobx UserInfoStatus store

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

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