「SDUDOC」前端Mobx状态管理设计与实现

SDUDOC实训记录 山东大学创新实训记录

选择Mobx的原因

使用管理状态的意义在于，把那些需要全局共享的状态和数据（例如登录状态、用户），统一交给一个容器（MobxStore）管理，并且希望当容器中任意一个状态更新时，所有引用或依赖该状态的组件/视图都更新。同时，出于性能考虑，更新的粒度要足够细（只有引用了该状态的部分更新，其他部分不更新）、更新的时机要足够及时（状态改变立即更新）、状态的更新要足够简单。因此，Mobx是不二之选，比Redux不知道高到哪里去了。

Mobx的使用

在src/mobxStore/index.ts中，配置mobx规则，并定义我们需要的strore：

我们定义了两个状态对象，分别是User表示用户数据，Counter是一个计数器状态Demo，代码如下：

import {
    configure } from 'mobx';
import Counter from './counter';
import User from './user';

// mobx规范化，强制要求状态的改变必须通过@action方法完成
configure({
    enforceActions: 'observed' });

const user = new User();
const counter = new Counter();

export default {
    user, counter };

然后，在src/mobxStore/user.ts中，定义相关的数据与action，并指定autorun，例如这里的token，我们需要它与本地存储保持同步，可以这样写：

import {
    action, autorun, makeAutoObservable } from 'mobx';

export default class User {
   
  token = localStorage.getItem('user.token') || '';
  refreshToken = localStorage.