1

你好 Sveltermeisters,

问题:我正在尝试在同一页面上初始化 App 的两个实例。App 在 main.js 文件中作为页面上的全局变量公开,如下所示:

//main.js
import App from './components/App.svelte'
window.App = App

然后在一个 html 页面中初始化两个应用实例

<!–– index.html  ––&gt; 
<button id="cta-button>CTA</button>
<button id="cta-button-2>CTA</button>

<!–– app.js is built and deployed as remote resource  ––&gt; 
<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。

我的断言:由于道具被倾倒到商店中,第二个实例将覆盖第一个实例。由于每个应用程序都引用同一组商店,因此它们的数据始终保持同步。

这是真的?如果是这样,我该如何设计我的商店以使他们的数据保持独立?

4

1 回答 1

1

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

将任意上下文对象与当前组件和指定键相关联。然后使用 getContext 组件的子级(包括插槽内容)可以使用上下文。


上下文本身并不是反应性的。如果您需要上下文中的反应式值,那么您可以将存储传递到上下文中,这将是反应式的。

于 2019-09-25T03:56:23.067 回答