卡比图床项目——mobx实现状态管理

搭建全局状态管理

在stores目录里面创建和各种用户操作相关的store。新建auth.js，里面负责管理用户的登录注册。store里面可能还有会用户自我管理，管理所有上传图片信息之类的sotre。再新建一个index.js，作为总入口导出。

运行yarn add mobx安装mobx 引入observable以及action

import {observable,action} from "mobx";

具体基本使用：

模拟一下发请求之后的登录

注册同理：

注销同理：

然后导出。

使用全局状态管理

在函数组件中使用

1. 设置Store（上一步已完成）
2. 创建Context 对象
3. useContext——设置useStores函数，用于在函数组件哪获取context对象
4. 使用context——观察(observer)组件，通过useStore获取context对象

在store目录中的index.js中完成第二步和第三步。

创建Context对象 以函数形式导出。这样就得到了useStore的方法

在Login组件中使用 首先引入mobx的observer，然后是刚才写好的useStores

之前写好的函数组件作为ovserver的参数，这个组件就可以监控状态的变化

引入后出现报错

ESLint: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". (5:4)

yarn add @babel/plugin-proposal-decorators安装这个插件 然后进行配置即可。

结果如下

将auth.js中的value改掉

下面添加一个input标签，添加一个onChange事件，去修改当前的状态。 通过ref得知我们当前点击的东西，并将其赋值给username 注意我们的mobx版本为6所以要添加一句：

才能实现同步变动

还有一种不用装饰器的写法：