Ngxs 商店在按 F5 刷新浏览器后处于丢失状态

Question

我试图在页面刷新之间保留状态，但它似乎丢失了状态信息。我正在尝试保存两个布尔值并检索它。我已经为 chrome 安装了 NGXS Dev 工具来检查状态。我可以看到该操作正在正确发送状态信息，但是当我按 F5 时会丢失该信息。我错过了什么？

动作

import { AgreementsStateModel } from '../models/agreements-state.model';

export class SetAgreementStatus {
    static readonly type = '[AGREEMENT] SetAgreementStatus';
    constructor(public payload: AgreementsStateModel) {}
}

状态

 import { Action, Selector, State, StateContext } from '@ngxs/store';
    import { AgreementsStateModel } from '../models/agreements-state.model';
    import { SetAgreementStatus } from './agreement.actions';



@State<AgreementsStateModel>({
  name: 'agreementModalState',
  defaults: {
       isDeferred: false,
       isInteracted: false
  }
})
export class AgreementState {

  constructor() { }

  @Selector()
  static agreement(state: AgreementsStateModel) {
    return state;
  }

  @Action(SetAgreementStatus)
  setAgreementStatus({ patchState }: StateContext<AgreementsStateModel>, { payload }: SetAgreementStatus) {
    patchState(payload);
  }
}

AppModule 导入

NgxsStoragePluginModule.forRoot()

调度状态

  this.store.dispatch(new SetAgreementStatus({isInteracted: true, isDeferred: true}));

读取状态信息

     @Select(AgreementState.agreement) agreementModalState$: Observable<AgreementsStateModel>;

  this.agreementModalState$.subscribe(agreementModalStatus => {
      this.agreementModalStatus = agreementModalStatus;
    });

Answer 1

因此，NGRX 存储不会在刷新期间保留信息。您必须使用用户 localStorage 或其他本地存储来存储此信息。

您可以这样做的一种方法是在您的减速器中，您还可以将您在商店中设置的相同信息存储在用户localStorage 中，然后当您刷新时，您可以获取您存储的任何信息，并填充您的商店.

有许多库尝试简化此操作，例如 ngrx-store-localstorage，它们同步商店和用户 localStorage，因此您不会在刷新之间丢失状态

但默认情况下，ngrx 商店不会在页面刷新之间保存信息