在Aurelia Store中执行状态保持

Question

我们有一个基本的应用程序状态，需要在浏览器刷新时持久化。类似于vuex-state-persistance插件。下面是需要持久化的基本状态代码。

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

有没有什么东西可以直接用作插件，或者我需要编写一个自定义插件来异步地保存localStorage中的状态？另外，当我们有一个复杂和大的状态要管理时，我们如何模块化状态？

Answer 1

Aurelia Store提供了一个在localStorage中持久化状态的内置机制。

因此，如果您的initialState在main.ts或main.js中初始化，如下所示：

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

然后，在app.ts或.js中，您应该注册本地存储中间件并执行恢复消重数据。

因此，在应用程序构造函数中，您可以这样写：

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);
}

关于模块化，也许你应该结合存储和EventAggregator来实现更复杂的场景。

祝好运