1

我想使用 Lit 反应式控制器创建一个基本的状态管理。目的是在整个应用程序中共享属性值。

当控制器附加到视图和嵌套在视图中的组件时，会出现此问题。当控制器内的值发生变化时，视图中的值会更新，但不会在嵌套组件中更新。

示例：state.js 包含存储逻辑。视图访问存储以创建值并显示状态值。嵌套组件也显示状态值。

state.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();
  }
}

组件.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);

视图.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);

在 view.js 中单击按钮会更新 view.js 中的 this.state.test，但不会在 component.js 中更新

4

1 回答 1

0

由于您在两者中都创建了一个新 的and ，因此它们是两个不同的实例，它们仅将其特定组件作为主机。StateControllerMonTodoTestComponentStateController

因此StateControllerinMonTodo仅MonTodo作为主机并且仅更新它而不是TestComponent. 您需要与两个组件共享一个控制器并同时调用requestUpdate两者。

于 2021-12-01T22:54:43.427 回答