如何从我注入 Svelte 应用程序的网页获取和设置 Svelte 存储值？

Question

我构建了一个 Svelte 应用程序，其中包含一个 stores.js 文件，其中包含一个名为 sSchool 的可写存储值。我以这种方式将应用程序注入我的 html 页面。

<div id="app-container"></div>
<script type="text/javascript" src="{% static 'choice/svelte/public/build/bundle.js' %}"></script>
<script>
  var myapp= new app({
    "target": document.getElementById("app-container"),
  })
</script>

我希望能够从此网页内的 JavaScript 片段获取和设置存储值 sSchool。我怎样才能做到这一点？谢谢

Answer 1

您需要弄清楚的第一件事是如何获取您的 sSchool 商店的参考。

1 个建议是像公开 app class 一样公开它，我相信你在某处做这样的事情？

import App from './App.svelte';
window.app = App;

也许你可以

import sStore from './store.js';
window.sStore = sStore;

这样，您就可以通过订阅它来获得商店的价值

sStore.subscribe(value => {
  console.log('store value:', value);
});

并设置商店的价值

sStore.set(newValue);

另一种方法是在 app 组件中定义组件方法：

<script>
   import sStore from './store.js';
   
   export function setStoreValue(newValue) {
     $sStore = newValue;
   }
   export function getStoreValue() {
     return $sStore;
   }
</script>

然后在你的脚本中，

<script>
  var myapp= new app({
    "target": document.getElementById("app-container"),
  })

  myapp.setStoreValue(123);
  myApp.getStoreValue(); // 123
</script>

参考资料

观看我的视频“如何在组件内部调用函数”https://youtu.be/EA0EX3tbNNM，其中解释了如何在组件内部调用函数

如何从我注入 Svelte 应用程序的网页获取和设置 Svelte 存储值？

How do I get and set a Svelte store value from a web page where I injected a Svelte app?

javascript

svelte

svelte-store