Совместное использование состояния между несвязанными компонентами - Svelte

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

Магазин

//Both with initial state as an empty array
export const current_embeds = writable([])
export const current_deletes = writable([])

Скрипт, в котором я обновляю магазин

btn.onclick = e => {
  e.preventDefault();
  e.stopPropagation();
  const linkdata = ctx.remove(vlink);
  if (linkdata) {
    //Updating the store
    current_deletes.update((prevState: Array < any > ): Array < any > => {
      return [...prevState, { ...linkdata
      }]
    })
  }
};

Подписка на компонент

//Listens to changes 
current_embeds.subscribe(data => console.log('CURRENT EMBEDS NAV --- ', data));

current_deletes.subscribe(data => console.log('CURRENT DELETES NAV --- ', data));


svelte svelte-3 svelte-store
person Nadeem Ahmad    schedule 17.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Из ваших фрагментов кода я не уверен, как вы обрабатываете подписанный компонент.
Вот рабочий REPL для вашего случая:
https://svelte.dev/repl/44551e32530c46a19a3752b53a5e7732?version=3.24.1

Я заметил, что вы должны импортировать и использовать свой подписанный компонент (Comp.svelte) в основном приложении (или его подкомпоненте), чтобы распознать и запустить подписанный компонент. Я не знаю, как «активировать» компонент в <script> части.

person grohjy    schedule 17.08.2020
comment
У меня есть файл под названием edits.ts, есть две функции. Первый вызывается, когда пользователь выбирает текст из dom на mousedown, и я обновляю состояние в этом случае. Вторая функция вызывается, когда пользователь удаляет выделенный текст, я обновляю delete_embeds. - person Nadeem Ahmad; 17.08.2020
comment
Так что это в основном сценарий, а не компонент. Но магазин обновляется. В компоненте есть кнопка, и я не буду включать ее при изменении магазина, поэтому в этом компоненте я подписался на магазин, чтобы отслеживать изменения. Но я не получаю никаких результатов в компоненте. - person Nadeem Ahmad; 17.08.2020
comment
@NadeemAhmad невозможно помочь вам, имея очень ограниченное представление о вашем коде. Как показал Grohjy, концепция работает. Попробуйте воспроизвести вашу проблему на примере codeandbox, так вам будет проще понять, в чем проблема. Или, может быть, вы сами в этом разберетесь при воспроизведении;) - person Thomas Hennes; 17.08.2020
comment
Хорошо дай мне минутку - person Nadeem Ahmad; 17.08.2020
comment
@ThomasHennes codeandbox.io/s/small-platform-o27k4 То же самое. это работает здесь, но не со мной - person Nadeem Ahmad; 17.08.2020
comment
В настоящий момент я не вижу ваш ящик с кодами. Я обновил свой REPL, поэтому он больше не использует компонент svelte, вместо этого подписки теперь находятся в файле .js. Подписка начинает работать, когда вы запускаете ее из основного приложения, потому что тогда вы подписались на обновления (Да, я чувствую себя глупо ...) - person grohjy; 17.08.2020