MobX中实现数据的懒加载

在 MobX 中实现数据的懒加载可以通过以下方式：

首先，创建一个可观察的属性来表示数据是否已加载，并创建一个异步的  action  来执行数据的加载操作。

javascript格式：

import { observable, action } from'mobx';

 

class MyStore {

  @observable isDataLoaded = false;

  @observable data = null;

 

  @action

  async loadDataIfNeeded() {

    if (!this.isDataLoaded) {

      try {

        const response = await fetch('https://example.com/api/data');

        const json = await response.json();

        this.data = json;

        this.isDataLoaded = true;

      } catch (error) {

        console.error('Error loading data:', error);

      }

    }

  }

}

 

export default new MyStore();

 

 

在您的组件中，在适当的时候调用  loadDataIfNeeded  方法，例如在组件挂载时。

 

javascript格式：

import React from'react';

import { observer } from'mobx-react';

import store from './store';

 

@observer

class MyComponent extends React.Component {

  componentDidMount() {

    store.loadDataIfNeeded();

  }

 

  render() {

    if (!store.isDataLoaded) {

      return <div>Loading...</div>;

    }

 

    return (

      <div>

        // 显示数据的相关逻辑

      </div>

    );

  }

}

这样，只有在需要的时候（即数据未加载时）才会发起数据加载请求，实现了懒加载的效果。