使用 MobX 实现数据持久化：最佳实践与技巧！

MobX 本身不提供数据持久化功能，但是可以结合其他库或技术来实现数据持久化。以下是几种常见的数据持久化方式：

1. 使用 localStorage 或 sessionStorage

您可以使用 localStorage 或 sessionStorage 在浏览器中存储数据。在 MobX 中，您可以将数据存储在 observable 对象中，并在 observable 对象更新时将数据保存到 localStorage 或 sessionStorage 中。以下是一个示例：

import { observable, action } from 'mobx';

class TodoStore {
  @observable todos = [];

  constructor() {
    const storedTodos = JSON.parse(localStorage.getItem('todos')) || [];
    this.todos = storedTodos;
  }

  @action addTodo = (todo) => {
    this.todos.push(todo);
    localStorage.setItem('todos', JSON.stringify(this.todos));
  };

  @action removeTodo = (index) => {
    this.todos.splice(index, 1);
    localStorage.setItem('todos', JSON.stringify(this.todos));
  };
}

const store = new TodoStore();

在上面的示例中，我们使用 localStorage 在浏览器中存储了 Todo 列表。在构造函数中，我们从 localStorage 中读取了 Todo 列表，并将其存储在 observable 对象中。在 addTodo 和 removeTodo 动作中，我们更新了 observable 对象，并将更新后的数据保存到 localStorage 中。

2. 使用 IndexedDB

IndexedDB 是一个低级 API，用于在浏览器中存储大量结构化数据。在 MobX 中，您可以使用 mobx-persist-store 库来将数据存储在 IndexedDB 中。以下是一个示例：

import { observable, action } from 'mobx';
import { createTransformer } from 'mobx-persist-store';

const transformer = createTransformer({
  serializer: (value) => JSON.stringify(value),
  deserializer: (value) => JSON.parse(value),
});

class TodoStore {
  @observable todos = [];

  constructor() {
    this.hydrate();
  }

  @action addTodo = (todo) => {
    this.todos.push(todo);
  };

  @action removeTodo = (index) => {
    this.todos.splice(index, 1);
  };

  hydrate = () => {
    const storedTodos = transformer.dehydrate(this, 'todos');
    this.todos = storedTodos || [];
  };

  dehydrate = () => {
    transformer.hydrate(this, 'todos');
  };
}

const store = new TodoStore();

// 在应用程序关闭时保存数据
window.addEventListener('beforeunload', () => {
  store.dehydrate();
});

在上面的示例中，我们使用 mobx-persist-store 库将 Todo 列表存储在 IndexedDB 中。在构造函数中，我们调用了 hydrate 方法从 IndexedDB 中读取 Todo 列表，并将其存储在 observable 对象中。在 addTodo 和 removeTodo 动作中，我们更新了 observable 对象。在应用程序关闭时，我们调用了 dehydrate 方法将更新后的数据保存到 IndexedDB 中。

3. 使用后端服务

如果您的应用程序需要在多个设备上同步数据，则可以使用后端服务来存储数据。在 MobX 中，您可以使用 mobx-state-tree 库来构建可序列化的状态树，并将其与后端服务同步。以下是一个示例：

import { types, applySnapshot, Instance } from 'mobx-state-tree';

const Todo = types.model({
  id: types.identifier,
  title: types.string,
  completed: types.boolean,
});

const TodoStore = types.model({
  todos: types.array(Todo),
}).actions((self) => ({
  addTodo: (title) => {
    const todo = Todo.create({
      id: Math.random(),
      title,
      completed: false,
    });
    self.todos.push(todo);
  },
  removeTodo: (todo) => {
    self.todos.remove(todo);
  },
  toggleTodo: (todo) => {
    todo.completed = !todo.completed;
  },
}));

const store = TodoStore.create({
  todos: [],
});

// 从后端服务加载数据
fetch('/todos')
  .then((response) => response.json())
  .then((data) => {
    applySnapshot(store, data);
  });

// 将更新后的数据保存到后端服务
setInterval(() => {
  fetch('/todos', {
    method: 'POST',
    body: JSON.stringify(store),
    headers: {
      'Content-Type': 'application/json',
    },
  });
}, 10000);

在上面的示例中，我们使用 mobx-state-tree 库构建了一个可序列化的状态树，并将其与后端服务同步。在构造函数中，我们从后端服务加载了 Todo 列表，并将其应用到状态树中。在 addTodo、removeTodo 和 toggleTodo 动作中，我们更新了状态树。在每隔 10 秒，我们将更新后的数据保存到后端服务中。

总之，MobX 本身不提供数据持久化功能，但是可以结合其他库或技术来实现数据持久化。您可以根据应用程序的需求选择合适的数据持久化方式。