0

我尝试在 lit-elements 中使用外部 js 文件来获取初始值，但如果我这样做了，它就不再是通过属性绑定来改变了。如果我在没有外部存储文件的情况下编写它，只需使用它。范围并在构造函数中声明它，一切正常。但作为外部文件不是...？：/

但为什么？

我有两个文件 menu.js：

import { LitElement, html } from '@polymer/lit-element';
import '@polymer/iron-pages/iron-pages.js';
import './main.js'
import { store } from './store'

class MenuElement extends LitElement {

  constructor() {
    super()
    this.page = 0;
    this.ninjas = ['Ninja1', 'Ninja2', 'Ninja3']
    this.log()
  }
  static get properties() {
    return {
      page: {
        type: Number
      },
      header: String,
      ninjas: Array,
      store: {
        type: Object,
        page: {
          type: Number
        }
      }
    }
  }

  render() {
    return html`
      <style>
        /* :host {
          border: solid 10px blue;
        } */
        ::slotted(h3) {
          border: solid 1px red
        }
      </style>
      <div>
        <ul>
          <li @click="${ (e) => { this.changePage2(e) } }">Home</li>
          <li @click="${ (e) => { this.changePage(e) } }">Page</li>
        </ul>
        <ul>
          ${this.ninjas.map(i => html`<li>${i}</li>`)}
        </ul>
      </div>

      <iron-pages selected="${ store.page }">
        <slot name="lala"></slot>
        <div><slot name="testSlot"></slot> Page 0</div>
        <main-view></main-view>
      </iron-pages>

    `;
  }

  changePage() {
    store.page = 1;
    console.log(store.page)
  }
  changePage2() {
    store.page = 0;
    console.log(store.page)
  }
  log() {
    console.log(store)
    console.log(store.page)
  }
}
customElements.define('app-menu', MenuElement);

和 b store.js

export let store = {
  page: 1
}

谢谢你的任何想法=）

4

1 回答 1

0

引用德拉科的话

其实不是 JS 的问题，每一种客观语言都可以有一个集合结构，但是修改集合并不会修改对象。在 JS 中比较意味着比较引用（不可能进行通用且快速的内容比较），因此将内容推送到数组会保持引用相同（因为它仍然是 Array 类的相同实例） - 只是内容发生了变化. 同样在类 Person { constructor() { this.isBanned = false; } }，如果你创建一个新实例（const p = new Person();）然后修改属性（p.isBanned = true;），它仍然是之前的同一个实例，只是属性不同。

您可以在https://open-wc.org/faq/rerender.html阅读全文

在外部存储的对象引用中永远不会改变，因此不会触发渲染。

你可以做什么

手动触发

像这样的东西

changePage() {
  store.page = 1;
  this.requestUpdate();
}

使用状态库

例如

当然，他们都有自己的一套规则并知道如何操作。

于 2019-10-03T10:43:34.297 回答