你好 Sveltermeisters,
问题:我正在尝试在同一页面上初始化 App 的两个实例。App 在 main.js 文件中作为页面上的全局变量公开,如下所示:
//main.js
import App from './components/App.svelte'
window.App = App
然后在一个 html 页面中初始化两个应用实例
<!–– index.html ––>
<button id="cta-button>CTA</button>
<button id="cta-button-2>CTA</button>
<!–– app.js is built and deployed as remote resource ––>
<script type="text/javascript" src="https://path.to/app.js"></script>
<script>
const app = new App({
target: document.querySelector('body'),
props: {
targetButtonIdToShowFormModal: "cta-button",
iGetDroppedIntoAStore1: "some value",
iGetDroppedIntoAStore2: "some value",
iGetDroppedIntoAStore3: "some value"
}
})
const app2 = new App({
target: document.querySelector('body'),
props: {
targetButtonIdToShowFormModal: "cta-button-2",
iGetDroppedIntoAStore1: "some different value",
iGetDroppedIntoAStore2: "some different value",
iGetDroppedIntoAStore3: "some different value"
}
})
</script>
奇怪的是:第二个 app 的 props 会覆盖第一个 app 的 props,并且每个 app 的状态始终保持同步,无论打开哪个 app。
我的断言:由于道具被倾倒到商店中,第二个实例将覆盖第一个实例。由于每个应用程序都引用同一组商店,因此它们的数据始终保持同步。
这是真的?如果是这样,我该如何设计我的商店以使他们的数据保持独立?