是否有针对 lit-element 的状态管理解决方案？

Question

如果存在应从数组呈现的列表，则该数组将从 Grand-grand-grand-grand-grand-parent 自定义元素传递。那会超级烦人。

是否有全局状态管理解决方案lit-element，就像redux？

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 的用法，请看这里。

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

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，它们都会自动保持同步。

Answer 2

LitElement是一个库，您可以使用任何库进行您想要的状态管理。只需订阅 constructor or 中的商店connectedCallback（取消订阅disconnectedCallback）并在商店通知您更改时更改组件的属性。

这里有一些适用于 litElement 的 PWA 助手，还有一个适用于 Redux。

https://github.com/Polymer/pwa-helpers