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

或

connectedCallback

中订阅商店（在

disconnectedCallback

中取消订阅），并在商店通知您更改时更改组件的属性。

这里有一些与 litElement 配合使用的 PWA 助手，还有一个用于 Redux 的助手。

https://github.com/Polymer/pwa-helpers#connect-mixinjs

Answer 3

我会研究MobX，这是一个非常流行的框架独立状态管理库

“MobX 不偏不倚，允许您在任何 UI 框架之外管理应用程序状态。这使您的代码解耦、可移植，最重要的是，易于测试。” - (Github)

Answer 4

我在游戏中迟到了，但这非常有用：

https://www.npmjs.com/package/@lit-app/state

@lit-app/state 是一个全局状态管理，与 lit web 组件集成。

为什么需要新的状态管理工具？

状态管理有很多选项，那么为什么还要另一种呢？

• 一些现有的选项太重了。在我看来，管理状态应该是精简而简单的。例如，Redux 就属于这一类。
• 一些专为lit设计的解决方案（例如lit-state）不支持Typescript，也不利用lit@2反应式控制器，非常适合将外部功能挂接到模板生命周期中。
• 一些优雅的想法值得追求（例如这条推文，或这篇文章。

如何使用？

import { State, StateController, property } from "@lit-app/state";
import { LitElement } from "lit";

// declare some state
class MyState extends State {
  @property({value: 'Bob'}) name  
}
const myState = new MyState()

// declare a component
class StateEl extends LitElement {

  // StateController is a Reactive Controller binding myState with the element
  state = new StateController(this, myState)
  override render() {
    return html`
      <div>This will be updated when the state changes: ${myState.name}</div>
    `;
  }
}

// changing the state will reflect in the template
myState.name = 'Alice'

Answer 5

Adobe 现在创建了 lit-mobx，并且可能将其用于新的 Photoshop 在线版本，以便通过 lit 轻松使用 MobX 状态管理框架。

您可以在此处使用点亮组件阅读更多内容：Photoshop 现已在网络上，但没有提及它们实际上如何进行状态管理。