微信小程序端在函数组件中使用 mobx 注入 store 失败

问题描述

在微信小程序端在函数组件中使用 mobx 注入 store 失败

在H5端正常

复现步骤

1. taro init 项目
2. 选择 ts + mobx 模板
3. 将首页改为函数组件并注入 counterStore

import Taro, { FC } from "@tarojs/taro";
import { Button, View } from "@tarojs/components";
import { observer, inject } from "@tarojs/mobx";

type PageStateProps = {
  counterStore: {
    counter: number;
    increment: Function;
    decrement: Function;
    incrementAsync: Function;
  };
};

const Index: FC<PageStateProps> = props => {
  console.log(props);

  return (
    <View>
      {/* <View>{counter}</View> */}
      <Button plain>点击</Button>
    </View>
  );
};

export default inject("counterStore")(observer(Index));

解决方案

可以直接 import counterStore, 删除 inject.
Mobx 已经不建议使用 inject 了, 因为 inject 的参数是字符串.
你甚至可以从 app.js 里删除 MobxProvider.

Mobx 现在的用法是: 只要你的组件用 observer 包起来, 它就能随 @observerable 的值变化.