Question

你好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>

奇怪的是：第二个应用程序的道具会覆盖第一个应用程序的道具，并且无论哪个应用程序处于打开状态，每个应用程序的状态始终保持同步。

我的断言：由于道具被丢弃到商店中，因此第二个实例将覆盖第一个实例。而且，由于每个应用程序都引用相同的商店，因此它们的数据始终保持同步。

这是真的吗？如果是这样，我该如何设计商店，以使其数据保持独立？

Answer 1

尝试为每个App实例创建一个商店实例，您可以使用context setContext和getContext。

将任意上下文对象与当前组件相关联，并   指定的键。然后，上下文可用于   组件（包括带槽内容）与getContext。


上下文不是天生的反应性。如果您需要   然后您可以将商店传递到上下文中，这将是   反应性的。

（Example）

Svelte：App构造函数的第二个实例化将覆盖第一个实例化，道具进入存储问题了吗？

1 个答案: