功能背景
最近学了一点react的东西,以前以为就用vue走天下了,现在越来越卷了,不多学习不行了,后来还用过uniapp,原生weixin小程序比较少,原生js的公众号h5也写过一些,jq是很多年前用的了,最近也看了点flutter的东西,但是感觉flutter对于他的插件库维护的并不是很好,比如说三年前的项目,现在启动不了,可能会因为某些插件已经停止维护,或者更新语法,会跟现在的dart版本、flutter、java版本出现不适应的情况,很恶心。言归正传,这里简单小记一下react的store的使用
实际效果
登录的时候存了用户信息,然后在页面进行读取显示
实现代码
注意:以下代码不全,只展示了部分关键代码,需要自行调整,方可使用
store/index.js
// 把所有的模块做统一处理
// 导出一个统一的方法 useStore
import React from "react"
import UserStore from "./user.Store"
import { configure } from "mobx"
configure({
enforceActions: "never",
})
class RootStore {
constructor() {
this.userStore = new UserStore()
// ...
}
}
// 实例化根
// 导出useStore context
const rootStore = new RootStore()
const context = React.createContext(rootStore)
const useStore = () => React.useContext(context)
export { useStore }
store/user.store.js
import { makeAutoObservable } from 'mobx'
import { http } from '@/utils'
class UserStore {
userInfo = {}
userDesc = ''
constructor() {
makeAutoObservable(this)
}
getUserInfo = async () => {
// 调用接口获取数据
const res = {name:"123",id:22}
this.userInfo = res.data
this.userDesc = '个人描述信息xxxx'
}
}
export default UserStore
存
import { useStore } from '@/store'
const { userStore} = useStore()
useEffect(() => {
userStore.getUserInfo()
}, [userStore])
取
import { useStore } from '@/store'
//读取store中的信息
const { userStore } = useStore()
useEffect(() => {
console.log('fsdhh 的书法绘画的',userStore)
}, [userStore])
<p>userDesc: {userStore.userDesc}</p>