Svelte: Второе создание конструктора приложений перезаписывает первое создание, а реквизиты уходят в магазин? - PullRequest
Новая
       94

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

1 голос
/ 24 сентября 2019

Здравствуйте Sveltermeisters,

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

Любопытно, что: реквизиты второго приложения перезаписывают реквизиты первого, и состояние каждого приложения всегда остается синхронизированным, независимо от того, какое приложение открыто.

Мое утверждение: поскольку реквизиты сбрасываются в магазины,второй экземпляр перезаписывает первый.И поскольку каждое приложение ссылается на один и тот же набор хранилищ, их данные всегда синхронизируются.

Это правда?Если да, то как я могу спроектировать свои магазины так, чтобы их данные оставались отдельными?

1 Ответ

0 голосов
/ 25 сентября 2019

Попробуйте создать экземпляр магазина для каждого экземпляра App, вы можете использовать context setContext & getContext.

Связывает произвольный объект контекста с текущим компонентом и указанным ключом.В этом случае контекст становится доступным для дочерних компонентов компонента (включая сегментированное содержимое) с помощью getContext.

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

( Пример )

...