在按下F5刷新浏览器后，Ngxs存储正在失去状态

Question

我试图在页面刷新之间保持状态，但似乎丢失了状态信息。我正在尝试保存两个布尔值并检索它。我已经为chrome安装了NGXS开发工具来检查状态。我可以看到该操作正确地调度了状态信息，但当我按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或其他本地存储来存储此信息。

可以做到这一点的一种方法是，在您的reducer中，您还可以将您在存储中设置的相同信息存储在用户localStorage中，然后在刷新时，您可以获取您存储的任何信息，并填充您的存储。

有很多库试图简化这一点，比如ngrx存储本地存储，它可以同步存储和用户localStorage，这样在刷新之间就不会丢失状态

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

Answer 2

刷新页面时，NGXS管理的状态将重置为其初始值。如果需要在刷新后保留数据，可以将数据存储在本地存储或会话存储中。