Taro 如何与 MobX 集成？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

// www.javascriptcn.com code example
import Taro from '@tarojs/taro';
import { observable, action, makeObservable } from 'mobx';
import { observer } from 'mobx-react';

class Store {
  @observable count = 0;

  constructor() {
    makeObservable(this);
  }

  @action
  increment() {
    this.count++;
  }

  @action
  decrement() {
    this.count--;
  }
}

const store = new Store();

@observer
class Counter extends Taro.Component {
  render() {
    return (
      <View>
        <Text>{store.count}</Text>
        <Button onClick={() => store.increment()}>Increment</Button>
        <Button onClick={() => store.decrement()}>Decrement</Button>
      </View>
    );
  }
}

export default Counter;

本题详细解读

1. 安装依赖

首先，确保你已经安装了 mobx 和 mobx-react 依赖：

npm install mobx mobx-react --save

2. 创建 MobX Store

在 Taro 项目中，你可以创建一个 MobX Store 来管理应用的状态。在上面的代码中，我们创建了一个 Store 类，并使用 @observable 装饰器来定义可观察的状态 count。@action 装饰器用于定义修改状态的方法 increment 和 decrement。

3. 使用 `makeObservable`

在 MobX 6 及以上版本中，推荐使用 makeObservable 来显式地标记哪些属性和方法是可观察的或可操作的。我们在 Store 的构造函数中调用了 makeObservable(this) 来实现这一点。

4. 使用 `@observer` 装饰器

为了将 Taro 组件与 MobX 集成，我们使用 @observer 装饰器来包装组件。这样，当 Store 中的状态发生变化时，组件会自动重新渲染。

5. 在组件中使用 Store

在 Counter 组件中，我们通过 store.count 访问状态，并通过 store.increment() 和 store.decrement() 方法来修改状态。由于组件被 @observer 装饰，当 count 发生变化时，组件会自动更新。

6. 导出组件

最后，我们将 Counter 组件导出，以便在其他地方使用。

通过以上步骤，你就可以在 Taro 项目中成功集成 MobX，并利用 MobX 的状态管理能力来构建响应式的应用。

Taro 如何与 MobX 集成？