Попробуйте сохранить объект в localStorage с помощью ngxs - PullRequest
Новая
       9

Попробуйте сохранить объект в localStorage с помощью ngxs

1 голос
/ 09 апреля 2020

Я пытаюсь сохранить объект состояния в localStorage браузера, используя плагин 'ngxs / storage-plugin' версии 3.5.1. Причина использования ngxs заключается в том, что мы используем ngxs для всех других состояний в сочетании с http-клиентом для сохранения состояния в бэкэнде.

Я искал пример в Интернете, потому что do c из На данный момент ngxs действительно плох, но результат также плох.

Вот мой код, который я уже написал. Состояние работало хорошо, но после того, как я начал добавлять плагин локального хранилища, я был потерян.

settings.actions.ts 

export class SetShowHelp {
  static readonly type = '[MySettings] Set my configuration for the flag showHelp';
  constructor(public showHelp: boolean) {}
}

settings.state.ts 

import { State, Action, StateContext, Selector } from '@ngxs/store';

import {
  SetShowHelp
} from '../actions/mysettings.actions';


export class SettingsStateModel {
  public showHelp: boolean;
  public hideToolbar: boolean
}

@State<SettingsStateModel>({
  name: 'my-settings',
  defaults: {
    showHelp: true,
    hideToolbar: false
  }
})

export class SettingsState {

  @Selector()
  static getShowHelp(state: SettingsStateModel) {
    return state.showHelp;
  }

  constructor() { }


  @Action(SetShowHelp)
  setShowHelp({ patchState }: StateContext<SettingsStateModel>, {showHelp}: SetShowHelp) {
    // patch the state and write into local storage
    patchState({
      showHelp: showHilfe
    });
  }

  .....

}

app.module.ts 

  NgxsModule.forRoot(),
  NgxsStoragePluginModule.forRoot({
      key: SettingsState
    }),

Как записать объект «SettingsStateModel» в localStorage?

1 Ответ

1 голос
/ 09 апреля 2020

Проблема заключалась в том, что название моего штата включает минус, что недопустимо. Я изменил название на «mysettings». Я также изменил app.module.ts на: 

  NgxsModule.forRoot([SettingsState]),
  NgxsStoragePluginModule.forRoot({
    key: 'mysettings'
  }),

После всех изменений все работает нормально.

...