polymer - lit-element 有状态管理解决方案吗？

Question

如果有一个列表应该从数组呈现，并且该数组将从grand-grand-grand-grand-grand-parent自定义元素传递。这会非常烦人。

是否有像 redux 一样的 lit-element 全局状态管理解决方案？

Answer 1

是的，查看LitState (npm 包名称 lit-element-state)。

我专门为 LitElement 创建了这个。它具有相同的理念:简单、小巧、功能强大。

因为它是专门为LitElement创建的，所以集成得非常好，因此使用非常简单。您创建一个如下所示的状态对象:

import { LitState, stateVar } from 'lit-element-state';

class MyState extends LitState {
    @stateVar() myCounter = 0;
}

export const myState = new MyState();

不使用@decorators，look here .

然后您可以在组件中使用状态，如下所示:

import { LitElement, html } from 'lit-element';
import { observeState } from 'lit-element-state';
import { myState } from './my-state.js';

class MyComponent extends observeState(LitElement) {

    render() {
        return html`
            <h1>Counter: ${myState.counter}</h1>
            <button @click=${() => myState.counter++}></button>
        `;
    }

}

当您将 observeState() mixin 添加到组件中时，当它们使用的任何 stateVar 发生更改时，组件将自动重新渲染。您可以使用任意数量的组件和状态来执行此操作，并且由于 observeState() mixin，它们都会自动保持同步。