在MobX中处理异步操作

在 MobX 中处理异步操作，通常可以结合使用  async/await  语法和  action  修饰器。
 
首先创建一个异步的  action  方法：
 
javascript格式：
import { observable, action } from'mobx';

class MyStore {
  @observable data = null;

  @action
  async fetchData() {
    try {
      const response = await fetch('https://example.com/api/data');
      const json = await response.json();
      this.data = json;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}

export default new MyStore();
 
 
然后在React 组件中调用这个异步  action  ：
 
javascript格式：
import React from'react';
import { observer } from'mobx-react';
import store from './store';

@observer
class MyComponent extends React.Component {
  componentDidMount() {
    store.fetchData();
  }

  render() {
    if (!store.data) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        <p>{store.data.someProperty}</p>
      </div>
    );
  }
}

export default MyComponent;
 
 
这样，当调用  fetchData  方法时，会执行异步操作获取数据，并更新 MobX 中的可观察状态，从而触发相关组件的重新渲染。