本文共 1814 字，大约阅读时间需要 6 分钟。

makeAutoObservable 详解

makeAutoObservable(target, overrides?, options?)

• target：将目标对象中的属性和方法设置为 Observable State 和 Action
• overrides：覆盖默认设置，将 target 对象中的某些属性或方法设置为普通属性
  • 因为并不是所有的属性或方法都需要转化
  • overrides 对象中的 key 是需要覆盖的属性或方法的名称，value 为 false 的会被设置成普通属性
• options：配置对象

// 将 reset 方法设置为普通属性，再通过 reset 方法修改状态 MobX 会发出警告（Warning）constructor() {   	makeAutoObservable(this, {    reset: false })}

// autoBind：使 Action 方法始终拥有正确的 this 指向// --------- 定义 store 的 class ---------constructor() {  makeAutoObservable(this, {}, {autoBind: true})}reset() {  console.log(this);  this.count = 0}// --------- 组件中调用方法 ---------// 正确 this 指向 counterStore.reset()}>重置// 错误 this 指向//   this 指向 undefined//   开启了 autoBind 后 this 会指向 Store 实例对象重置

状态变化更新视图的必要条件

总结一下状态变化更新视图的必要条件：

1. 状态需要被标记为 Observer State
2. 更改状态的方法需要被标记为 Action
3. 组件视图必须通过 observer（mobx-react-lite 提供） 方法包裹

makeObservable 手动转化

makeAutoObservable 方法会自动转化 target 对象的属性和方法。

MobX 还提供了 makeObservable 方法，可以手动转化指定的属性或方法。

makeAutoObservable(target, annotations?, options?)

• target：指定要转化的目标实例对象
• annotations：注解对象
  • key：指定要转化的属性或方法
  • value：annotation（注解，从 mobx 引入的方法），指定要转换成什么，例如：
    • observable：Observable State
    • action：Action

import {    makeObservable, observable, action } from "mobx"class CounterStore {     // 数值状态  count = 10  constructor() {       // 将参数对象的属性设置为 Observable State    // 将参数对象的方法设置为 Action    makeObservable(this, {         count: observable,      increment: action,      reset: action    })  }  // 使数值+1  increment() {       this.count += 1  }  // 重置数值状态  reset() {       this.count = 0  }}export default CounterStore

更正 this 指向

使用 makeObservable 手动转化的 action，无法通过 options 配置 autoBind 为 true 更正 this 指向。

需要在指定转化类型的时候使用 action.bound

makeObservable(this, {     reset: action}, {     autoBind: true // reset this 指向未变更})

makeObservable(this, {     reset: action.bound // reset this 指向变更})