Question

我正在使用带有钩子的mobx-react-lite。

我有两家商店。 AuthStore SomeOtherStore

这是我的假人AuthStore

import { observable, decorate, action } from 'mobx';
import { createContext } from 'react';
import { ROLE_LOGISTICS_MANAGER } from '../settings/constants';
import AuthService from '../services/AuthService';

class AuthStore {
  constructor() {
    this.authService = new AuthService();
  }

  currentMode = ROLE_LOGISTICS_MANAGER;

  authenticating = true;

  isLoggedIn = false;

  userId = null;

  loginLoading = false;

  login = async params => {
    this.loginLoading = true;
    try {
      const data = await this.authService.loginAsync(params);
      this.loginLoading = false;
      this.isLoggedIn = true;
    } catch (e) {
      console.error(e);
      this.loginError = e;
    } finally {
      this.loginLoading = false;
    }
  };
}
decorate(AuthStore, {
  currentMode: observable,
  loginLoading: observable,
  isLoggedIn: observable,
  authenticating: observable,
  userId: observable,
  fetchUser: action,
  login: action
});
export const AuthStoreContext = createContext(new AuthStore());

现在让我说我想从另一家商店更改isLoggedIn，我怎样才能做到这一点？我试图在docs中找到方法，找不到可靠的解决方案。我正在使用带有mobx-react-lite的钩子所以通常我会像这样使用mobx

const authStore = useContext(AuthStoreContext);

Answer 1

在RootStore上将存储作为属性存储是一种常见的模式，每个存储都有对根的引用。因此，您可以使用类似以下的结构：

class RootStore {
  constructor (auth, ui) {
    this.auth = new AuthStore(this)
    this.ui = new UiStore(this)
  }
}

class AuthStore {
  constructor (rootStore) {
    this.rootStore = rootStore
  }

  logout() {
    this.isLoggedIn = false
  }
}

decorate(AuthStore, {
  logout: action
})

然后，当您需要在另一个商店上调用函数时，可以将对根的引用用作路径。 here对模式进行了更详细的描述。与useContext一起使用的可能示例可能是：

const { someStore } = useContext(rootStoreContext)
someStore.rootStore.auth.logout()

Mobx：从另一个商店更改商店的值

1 个答案: