使用mobx-persist和AsyncStore持久化数据

npm install mobx-persist @react-native-async-storage/async-storage

import { create } from 'mobx-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { observable } from 'mobx';

const hydrate = create({
  storage: AsyncStorage,
  jsonify: true, // 可选，将数据序列化为JSON格式
});

class Store {
  @observable data = []; // 要持久化的mobx状态

  // 其他mobx状态和操作
}

const store = new Store();

// 持久化mobx状态
hydrate('key', store).then(() => {
  // 在数据加载完成后启动应用
  // 可以在这里进行其他初始化操作
});

import { observer } from 'mobx-react';

@observer
class MyComponent extends React.Component {
  render() {
    const { data } = this.props.store;

    // 使用持久化的mobx状态
    return (
      <View>
        {data.map((item) => (
          <Text key={item.id}>{item.name}</Text>
        ))}
      </View>
    );
  }
}

export default MyComponent;

import { action } from 'mobx';

class Store {
  @observable data = [];

  @action
  addData(item) {
    this.data.push(item);
    this.flush(); // 将状态持久化到本地存储
  }

  // 其他mobx操作

  flush() {
    hydrate('key', this); // 将状态持久化到本地存储
  }
}