TS+Mobx场景下解构store的action方法调用时报undefined属性错误的原因

问题核心原因 #

你遇到的报错本质是类普通方法的this指向丢失，和Mobx本身没有直接关联，是JavaScript/TypeScript的固有特性：

• 当你从类实例上解构普通类方法时，相当于把方法的引用单独赋值给了一个变量，此时调用这个变量，方法内部的this不再绑定到原类实例上。在TypeScript默认的严格模式下，独立调用的普通方法内部this会被赋值为undefined，因此你调用setSelectedTab时，内部执行this.selectedTab = selectedTab就会抛出「无法设置undefined的属性」的错误。
• 你修改为GlobalPageState.setSelectedTab(newTab)写法时，方法是作为实例的属性调用，this会自动绑定到GlobalPageState实例上，因此可以正常执行。

为什么其他方法解构可以正常使用？ #

有两种常见情况：

• 其他方法是类箭头函数写法，箭头函数的this在定义时就绑定到了类实例，不会随调用方式变化
• 其他方法内部没有用到this，自然不会触发指向错误

可选修复方案 #

Mobx的@action装饰器默认仅处理响应式更新的包装逻辑，不会自动绑定方法的this指向。如果你需要解构后直接使用方法，可以选择以下任意一种方案修改状态类定义：

1. 使用@action.bound装饰器，Mobx会自动帮你绑定this指向：

@action.bound
public setSelectedTab(selectedTab: PageTab) {
  this.selectedTab = selectedTab;
}

2. 将方法改为类箭头函数，再搭配@action装饰：

@action
public setSelectedTab = (selectedTab: PageTab) => {
  this.selectedTab = selectedTab;
}

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