Taro中使用Mobx

Posted 2023-03-18

参考技术A 在项目 src 目录下新增一个 store/counter.js 文件

在项目入口文件 app.js 中使用 @tarojs/mobx 中提供的 Provider 组件将前面写好的 store 接入应用中

在页面中可通过 @tarojs/mobx 提供的 inject 以及 observer 方法将 mobx 与我们的页面进行关联

上例中 Provider、inject、 observer 的使用方式基本上与 mobx-react 保持了一致，但也有以下几点需要注意：

在 mobx-react 中，可通过以下方式设置 store：

而在 @tarojs/mobx 中，我们需要使用以下方式设置：

按照以下方式使用 inject 时，不能省略 observer 的显式调用：

在 Component 的 render 方法中，如果需要使用一个 observable 对象（该例中为 counter），需要：

而非：

如果使用 @observable 装饰器来定义可观察对象时，请确保该属性已经初始化（这是很多情况下属性值改变，页面没刷新的根源所在），比如：

自 1.2.0-beta.5 后，propTypes 已从 taro-mobx、taro-mobx-h5、taro-mobx-rn 中剥离，如需使用，请单独进行安装：

propTypes 使用与 mobx-react 一致。

参考文章： http://www.geekjc.com/post/5cab191109719f65d90cd3c4