在不相关的组件之间共享状态-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));

解决方法

根据您的代码段，我不确定如何处理已订阅的组件。
这是适合您的情况的有效REPL：
https://svelte.dev/repl/44551e32530c46a19a3752b53a5e7732?version=3.24.1

我注意到，您必须导入并使用主应用程序（或其子组件）中的子组件（Comp.svelte），才能真正识别并运行您所订阅的组件。我不知道如何“激活” <script>部分中的组件。