如何从注入 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 sn-ps 获取和设置商店值 sSchool。我怎样才能做到这一点？谢谢。

Answer 1

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

---

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

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，其中解释了如何在组件内调用函数