时间戳

首页 > 解决方案 > Svelte：App 构造函数的第二次实例化覆盖了第一次实例化，Props 进入 Stores 问题？

svelte - Svelte：App 构造函数的第二次实例化覆盖了第一次实例化，Props 进入 Stores 问题？

问题描述

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

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

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

标签： sveltesvelte-componentsvelte-3svelte-store

解决方案

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

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

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

（例）

推荐阅读