MobX 6 + React项目可识别counter变量但找不到increment等函数的原因是什么

• 首先是原型属性展示的问题：你代码里定义的increment、decrement是类的普通方法，默认挂载在UserStore类的原型对象上，不属于实例自身的可枚举属性。你在控制台打印store实例时，浏览器默认只会展示实例自身的属性（比如你定义在实例上的counter），原型方法需要展开控制台中实例的[[Prototype]]（部分浏览器显示为__proto__）层级才能看到，并非方法不存在。
• 如果你是调用方法时出现xxx is not a function的报错，大概率是this绑定丢失导致的：如果你直接解构store取方法const { increment } = UserStore，此时调用increment()时内部的this不指向store实例，就会抛出异常。解决方法有三种：
  1. 调用时不要解构，直接用UserStore.increment()的形式调用
  2. 把store里的方法改成箭头函数写法：increment = () => { this.counter++ }，箭头函数的this会绑定到实例自身
  3. 使用makeAutoObservable替代手动配置的makeObservable，可以自动处理方法的this绑定和类型标记
• 额外排查点：确认你的项目根组件已经用mobx-react的Provider组件包裹，并且正确传入了key为UserStore的store实例，你能正常拿到counter说明这一步配置是正确的，不需要额外调整。

内容的提问来源于stack exchange，提问作者aliosmankepir