Если есть список, который должен быть отображен из массива, и массив будет передан из пользовательского элемента grand-grand-grand-grand-parent. Это будет супер раздражать.
Существует ли глобальное решение для управления состоянием для lit-element, как и для redux?
LitElement – это библиотека, и вы можете использовать любую библиотеку для управления состоянием по своему усмотрению. Просто подпишитесь на магазин в constructor или connectedCallback (отпишитесь в disconnectedCallback) и измените свойства компонентов, когда магазин уведомит вас об изменении.
Здесь у вас есть несколько помощников PWA, которые работают с litElement, и один для Redux.
https://github.com/Polymer/pwa-helpers
Да, проверьте LitState (имя пакета npm lit-element-state).
Я создал это специально для ЛитЭлемент. У него тот же образ мышления: простой, маленький и мощный.
Поскольку он создан специально для ЛитЭлемент, он очень хорошо интегрируется, и поэтому его использование очень простое. Вы делаете объект состояния следующим образом:
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() в свой компонент, компонент будет автоматически перерисовываться при изменении любого stateVar, который они используют. Вы можете сделать это с любым количеством компонентов и состояний, и все они будут автоматически оставаться синхронизированными благодаря миксину observeState().
