Svelte: второй экземпляр конструктора приложений перезаписывает первый экземпляр, проблема с переходом в магазины?

Question

Здравствуйте, Свельтермейстеры,

Проблема: я пытаюсь инициализировать два экземпляра приложения на одной странице. Приложение отображается как глобальная переменная на странице в файле 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.

---

Контекст по своей природе не является реактивным. Если вам нужны реактивные значения в контексте, вы можете передать хранилище в контекст, который будет реактивным.

(Пример)