Lit Elements外部js文件作为由属性数据绑定更改的存储

Question

我试图在lit元素中使用一个用于init值的外部js文件，但如果我这样做，它就不再通过属性绑定进行更改。如果我在没有extanal存储文件的情况下编写它，请使用这个。范围并在构造函数中声明，一切都很好。但作为外部文件不是…？：/

但为什么呢？

我有两个文件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
}

谢谢你的意见

Answer 1

引用dracco

实际上这与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();
}

使用状态库

例如

• https://github.com/adobe/lit-mobx
• https://www.npmjs.com/package/lit-robot

当然，他们都有自己的一套规则和诀窍。