Javascript 是否建议每个页面都有一个mobx存储？

我正在构建一个单页应用程序，前端使用Reactjs和MobX（端口3000），后端使用Nodejs和Express（API，端口4000）。我对MobX和Reactjs都是新手，我正在尝试建立一个结构良好的项目。 我的问题是：每个视图都有一个存储可以吗

例如，我有一个UserStore，它存储会话信息并负责平台内用户的登录和注销。但是，登录后，我想将用户重定向到仪表板页面。此仪表板页面必须检索有关用户的信息，但也必须联系API并检索一些数据（即一些TODO）。 我会这样做：

这是用于重定向到仪表板的登录函数：

*UserStore.js*

[...]
import  navigationStore  from './NavigationStore';

[...]

login = async (user) => {
  try {
    const res = await axios.post('/session/login', { 
      username: user.username, 
      password: user.password 
    });

    this.saveUser(res.data);
    navigationStore.push('/dashboard'); 
  } catch (error) {
    [...]
  }
}

[... imports and initializations ...]
class Store {

  @observable todos = null

  constructor() {
    this.getDashboard();
  }

  @action('Load dashboard') getDashboard =  async () => { 
    const res = await axios.get('/api/dashboard/', {});    
    this.todos = res.todos
  }

}

const DashboardStore = new Store();

export default DashboardStore;

然后，我创建了一个DashboardStore.js，其代码如下：

*DashboardStore.js*

[...]
import  navigationStore  from './NavigationStore';

[...]

login = async (user) => {
  try {
    const res = await axios.post('/session/login', { 
      username: user.username, 
      password: user.password 
    });

    this.saveUser(res.data);
    navigationStore.push('/dashboard'); 
  } catch (error) {
    [...]
  }
}

[... imports and initializations ...]
class Store {

  @observable todos = null

  constructor() {
    this.getDashboard();
  }

  @action('Load dashboard') getDashboard =  async () => { 
    const res = await axios.get('/api/dashboard/', {});    
    this.todos = res.todos
  }

}

const DashboardStore = new Store();

export default DashboardStore;

但这意味着我最终会为Todos页面做另一个存储，为我需要的任何页面做另一个存储。

---

在NodeJs中，您可以为每个类创建一个控制器，这一点也不奇怪。但是，我不确定它在MobX上是如何工作的。

这取决于应用程序的复杂性。我不会为每个视图或关注点创建一个存储，但您可以创建两个，就像MobX docs推荐的那样：

我现在正在做一个更大的项目，我们从一个商店开始。显然，随着我们不断添加功能，它增长了很多，所以我认为我们可能会在某个时候拆分它以降低复杂性