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

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

我构建了一个 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。我怎样才能做到这一点？谢谢。

解决方法

您需要弄清楚的第一件事是如何获取您的 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，其中解释了如何在组件内部调用函数