首页 > 解决方案 > 当页面重新加载时,ngrx 存储数据被刷新到初始状态

问题描述

如何在 Angular 7 中持久存储 ngrx 数据考虑以下场景

1.当我们登录时,我们将存储用户信息
2.当用户更新他的个人资料时,我们会发送一个更改并且数据将在所有组件中更新
3.这里的问题是什么时候页面刷新发生ngrx存储数据消失了如何解决这个

问题我的问题是制作一个资源并将该资源连接到所有所需的组件以及当资源(数据)发生某些更改时如何将更改反映到所有相关组件请帮助我如何实现这一目标

标签: angularngrx

解决方案


例如像这样使用ngrx-store-localstorage :

import { StoreModule } from '@ngrx/store';
import { localStorageSync } from 'ngrx-store-localstorage';

export function localStorageSyncReducer(rootReducer: any) {
    return localStorageSync({ keys: ['what', 'keys', 'do', 'you', 'want', 'to', 'store'], rehydrate: true })(rootReducer);
}

@NgModule({
  imports: [
    StoreModule.forRoot(reducer, {
      metaReducers: [..., localStorageSyncReducer],
    }),
  ],
  ...

其中keys代表reducer使用的keys: 见文档


推荐阅读