Перестает работать привязка связанного элемента select store - это ошибка? или мой код?

Question

Выбор элемента, привязанного к объекту состояния, теряет привязку обновления.

Я делаю некоторые исследования с lit-html и различными комбинациями маршрутизации / магазина и столкнулся с этим странным поведением. Я использовал стек-блиц от create-lit-app.

У меня есть меню, которое заполняется из массива объекта store.state. Эти ссылки обновляют атрибут currentPage в магазине.

Навигация самостоятельно прослушивает хранилище и устанавливает атрибут [active], если он соответствует currentPage магазина.

События клика обновляют магазин. Это все работает нормально.

В другом элементе (hello-world) у меня есть поле выбора. Поле выбора заполняется тем же массивом в объекте store.state. Атрибут [selected] устанавливается, если опция соответствует атрибуту currentPage. Это тоже отлично работает.

Я также поместил пару тегов p, которые отображают currentPage для здравомыслия... или безумия... пока не уверен.

Теперь, когда я возвращаюсь к использованию меню, состояние изменяется, и меню [active] работает, как и обновления тега p в другом (hello-world) элементе. Однако элемент select не обновляется. Я могу использовать select для обновления состояния, но привязка к select, похоже, перестала работать все вместе.

Я пробовал super.update() и this.update() после поиска похожих проблем, но до сих пор нет сыра. Мне интересно, является ли это функцией уродливого анти-паттерна с моей стороны, или это может быть ошибка RC.

class HelloWorld extends LitElement {

constructor() {
    super();
    store.subscribe(() => super.update());
}

_updatePage(e) {
  console.log(e.target.value);
  store.update(s => s.currentPage = e.target.value);
}

render() {

    return html`
  <p class="app-intro">
    Current page: ${store.state.currentPage}
  </p>
  <select @change=${(e) => this._updatePage(e)}>
    ${store.state.navItems.map(navItem => {
      return html`<option ?selected=${store.state.currentPage===navItem.page}>${navItem.page}</option>`
      })
    }
  </select>

        <p class="app-intro">
            Current page: ${store.state.currentPage}
        </p>
    `;
}

}

Я хочу иметь возможность обновлять состояние из любой точки приложения и обновлять всех подписчиков.

Answer 1

Я предлагаю установить свойства вашего элемента при обновлении магазина, чтобы ваш элемент не был тесно связан со структурой магазина.

В противном случае вы можете использовать this.requestUpdate() вызвать обновление. update() это просто обратный вызов жизненного цикла, который вызывается LitElement внутренне.