mobx（v5 -> v6）

前言： 好久不用mobx了，今天正好搞了个新架子，安装了最新的mobx， 按照以前的写法， 居然不生效！！！

最终查阅文档发现： mobx版本6 更新了写法

版本5代码示例：

import { observable, action } from 'mobx'

export default class UserStore {
  @observable token: string = localStorage.getItem('token') || ''
  @observable userInfo: any = null

  @action
  setUserInfo = (val: any) => {
    this.userInfo = val
  }

  @action
  setToken = (val: string) => {
    this.token = val
    localStorage.setItem('token', val)
  }

}

版本6写法：（官方推荐第一种）

// 第一种
　　import { makeObservable, observable, action } from 'mobx';

export default class UserStore {
   token: string = localStorage.getItem('token') || '';
   userInfo: any = null;  
   constructor() {
    makeObservable(this, {
      token: observable,
      userInfo: observable,
      setUserInfo: action,
      setToken: action,
    });
  }
  setUserInfo = (val: any) => {
    this.userInfo = val;
  };

  setToken = (val: string) => {
    this.token = val;
    localStorage.setItem('token', val);
  };
}

或者直接使用makeAutoObservable 默认推断所有属性， 不用单个一一声明

// 第二种
　　import { makeAutoObservable } from 'mobx';

export default class UserStore {
    token: string = localStorage.getItem('token') || '';
    userInfo: any = null; 
 
    constructor() {
      makeAutoObservable(this);
    }

    setUserInfo = (val: any) => {
      this.userInfo = val;
    };
 
    setToken = (val: string) => {
     this.token = val;
     localStorage.setItem('token', val);
    };

  }

 话说回来， mobx 为什么要进行这么大的改动呢？

文档中有这段话， 

翻译过来就是：

版本 6 之前的 MobX 鼓励使用 ES.next 装饰器将事物标记为可观察的、计算的和动作的。

但是，装饰器目前还不是 ES 标准，标准化的过程需要很长时间。

看起来标准也将与之前实现装饰器的方式不同。

出于兼容性考虑，我们选择在 MobX 6 中放弃它们，并推荐使用 makeObservable / makeAutoObservable 代替