Performing a state persistance in Aurelia Store

Question

We have a basic app state that needs to be persisted upon the browser refresh. similar to vuex-state-persistance plugin. Here is the basic state code that needs to be persisted.

export const initialState = {
    user: {
        uuid: 'wedRfertYjsnjnakUiisdj878HBhsns',
        name: 'Kiran Maniya',
        scope: 'user'
    }
};

Is there anything that can be used directly as a plugin or I need to write a custom plugin that persists the state in localStorage asynchronously? Also, how do we modularise the state when we have a complex and large state to manage?

Answer 1

Aurelia Store provides a built-in mechanism to persist state in localStorage.

So, if your initialState goes initialized in main.ts or main.js something like this:

aurelia.use.plugin('aurelia-store', { initialState: initialState });

Then in app.ts or .js you should register the localstorage middleware and perform a rehydration.

So, in app constructor, you could write:

import { localStorageMiddleware, rehydrateFromLocalStorage, Store } from 'aurelia-store';
import { initialState, State } from 'state';
...
constructor(
    private store: Store<State>,
  ) {
    store.registerMiddleware(localStorageMiddleware, MiddlewarePlacement.After, { key: ¨someKey¨ });
    store.registerAction('Rehydrate', rehydrateFromLocalStorage);
}

Regarding modularization, maybe you should combine store and the EventAggregator to implement more complex scenarios.

Good luck