Quiero crear una gestión de estado básica usando controladores reactivos Lit. El propósito es compartir valores de propiedad a través de la aplicación.

El problema ocurre cuando se adjunta un controlador a una vista y a un componente anidado en la vista. Cuando cambia el valor dentro del controlador, el valor en la vista se actualiza, pero no en el componente anidado.

Ejemplo: state.js contiene la lógica de la tienda. Una vista accede a la tienda para crear un valor y mostrar el valor del estado. Los componentes anidados también muestran el valor del estado.

estado.js

 export class StateController { static get properties() { return { state: { type: Object }, host: { type: Object } } } constructor(host) { // Store a reference to the host this.host = host; this.state = {}; // Register for lifecycle updates host.addController(this); } _setStoreValue(property, val) { this.state[property] = val; this.host.requestUpdate(); } }

componente.js

 import { LitElement, html } from 'lit'; import { StateController } from '../state.js'; export class TestComponent extends LitElement { static get properties() { return { stateCtrl: { type: Object }, state: { type: Object }, }; } constructor() { super(); this.stateCtrl = new StateController(this); this.state = this.stateCtrl.state } render() { return html` Value in component: ${this.state?.test} `; } } customElements.define('test-component', TestComponent);

ver.js

 import { LitElement, html } from 'lit'; import { StateController } from '../state.js'; import './test-component.js'; export class MonTodo extends LitElement { static get properties() { return { stateCtrl: { type: Object }, state: { type: Object }, }; } constructor() { super(); this.stateCtrl = new StateController(this); this.state=this.stateCtrl.state } render() { return html` <button @click=${() => this.setValueTest()}>Set value to 3</button> Value in view: ${this.state?.test} <h3> Component 1</h3> <test-component></test-component> <h3> Component 2</h3> <test-component></test-component> `; } setValueTest() { this.stateCtrl._setStoreValue("test", 3) } } customElements.define('mon-todo', MonTodo);

Un clic de botón en view.js actualiza this.state.test en view.js pero no en component.js