你好Sveltermeisters，
问题：我正在尝试在同一页面上初始化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实例创建一个商店实例，可以使用context setContext＆getContext。
将任意上下文对象与当前组件和指定的键关联。然后，可以使用getContext将上下文提供给组件的子组件（包括插入的内容）。
上下文并不是天生的反应。如果需要上下文中的反应性值，则可以将存储传递到上下文中，这将是反应性的。
（示例）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句