如何在Svelte存储内嵌JS中获取Svelte运行时值？

1. 用定位按钮替代内嵌JS（推荐） #

完全不用修改Store里的ASCII内容，通过绝对定位把按钮覆盖在目标符号位置上，所有状态逻辑交给Svelte原生响应式处理，彻底规避内嵌JS的隔离问题。

示例代码：

<script>
  import { logo } from '$lib/stores';
  let off = false;
</script>

<div class="logo-wrapper" style="position: relative;">
  <!-- 渲染原始ASCII -->
  <pre>{$logo}</pre>
  <!-- 覆盖在目标符号上的按钮 -->
  <button 
    class="logo-btn"
    style="position: absolute; top: 10px; left: 20px; background: transparent; border: none; cursor: pointer; font-family: monospace;"
    on:click={() => off = !off}
  >
    -.
  </button>
</div>

<!-- 用Svelte原生条件渲染控制图片显示 -->
{#if !off}
  <img src="your-logo.png" alt="Logo" />
{/if}

<style>
  .logo-wrapper pre {
    margin: 0;
    white-space: pre;
  }
</style>

调整按钮的top和left值就能精准覆盖目标符号，切换主题时off变量的状态会被Svelte正确跟踪，不会出现显示异常。

2. 全局挂载变量（不推荐） #

如果一定要保留内嵌JS的写法，可以把Svelte变量挂载到window全局对象上，让内嵌JS能访问到，但这种方式会污染全局环境，组件销毁时需要清理避免内存泄漏。

示例：

<script>
  import { logo } from '$lib/stores';
  import { onMount, onDestroy } from 'svelte';
  let off = false;

  onMount(() => {
    window.logoState = {
      get off() { return off; },
      set off(val) { off = val; }
    };
  });

  onDestroy(() => {
    delete window.logoState;
  });
</script>

<pre>{@html $logo}</pre>

Store里的ASCII可以这样写内嵌逻辑：

`...ASCII内容...<button onclick="window.logoState.off = !window.logoState.off">-.
</button>...ASCII内容...`

3. 拆分ASCII内容（最后选项） #

如果以上两种方式都不适用，再考虑拆分ASCII，把需要加按钮的部分单独拆分出来，用Svelte模板拼接：

<script>
  import { logoStart, logoEnd } from '$lib/stores';
  let off = false;
</script>

<pre>
  {$logoStart}
  <button on:click={() => off = !off}>-.
</button>
  {$logoEnd}
</pre>

这种方式最稳妥，但需要修改Store里的ASCII结构。

总结：优先选择第一种定位按钮的方案，既不用改动原有ASCII，又能利用Svelte的响应式特性彻底解决状态同步问题。

内容的提问来源于stack exchange，提问作者Aninsi Sasberg