多个 Store 实例导致的数据隔离

创建多个实例的情况

const useStore = () => {
  const store = makeAutoObservable({
    list: [],
    getList: () => {
      // some logic to fetch list
    }
  });
  return store;
};
export default useStore;

在这种情况下，每次调用useStore()函数时，都会创建一个新的store实例。这意味着每次你在组件中调用useStore()，都会得到一个独立的store对象。这些store对象之间是完全独立的，它们的状态不会相互影响。

原理

每次调用useStore()时，都会执行函数体内的代码，创建一个新的makeAutoObservable实例。由于每个实例都是在独立的函数调用中创建的，它们不会共享状态。

使用场景

• 独立组件状态：当你希望每个组件都有自己独立的状态时，这种方式非常有用。例如，你有一个TodoList组件，每个TodoList实例都有自己的任务列表，互不干扰。
• 动态创建实例：在某些情况下，你可能需要根据用户操作动态创建新的实例，这种方式也很方便。

创建单个实例的情况

const store = makeAutoObservable({
  list: [],
  getList: () => {
    // some logic to fetch list
  }
});

const useStore = () => store;
export default useStore;

在这种情况下，store实例是在模块级别创建的，是一个全局的单例对象。每次调用useStore()时，都会返回同一个store实例。这意味着所有使用useStore()的地方都会共享同一个状态。

原理

由于store是在模块级别定义的，它在整个模块中只会被初始化一次。每次调用useStore()时，都会返回这个已经创建好的store实例，而不是创建一个新的实例。

使用场景

• 全局状态管理：当你需要在多个组件之间共享状态时，这种方式非常有用。例如，你有一个全局的用户状态，所有组件都需要访问和更新这个状态。
• 减少重复状态：避免在多个地方重复创建相同的状态，节省内存和资源。