Svelte中store更新时如何同步更新数组内依赖store的取值？

你当前代码中的palettes是组件初始化阶段仅执行一次计算的常量，Svelte不会主动追踪其内部依赖的color prop变动，因此即使color随store更新，palettes也不会重新生成配色数据。而h1标签直接绑定了color变量，因此可以正常响应更新。

使用Svelte内置的响应式声明语法$:标记palettes的计算逻辑，使其在color变量变化时自动重新执行，生成最新的配色数组，修正后代码如下：

<script>
import tinycolor from 'tinycolor2'

export let color

// 响应式逻辑：color变化时自动重新计算所有配色方案
$: palettes = [
  {
    name: 'Simple Gradient',
    colors: [
      // 替换为你实际使用的颜色处理方法，最终建议转成字符串格式方便渲染
      tinycolor(color).lighten(10).toHexString(),
      tinycolor(color).darken(10).toHexString(),
      // 其余颜色项保持原有逻辑不变
      ]
  },
  // 其余配色方案配置保持不变
]
</script>
<main>
  <h1>{color}</h1>
  {#each palettes as palette}
    {#each palette.colors as currentColor} <!-- 修改循环变量名，避免和外层color prop重名导致作用域冲突 -->
      <div>{currentColor}</div>
    {/each}
  {/each}
</main>

补充说明 #

如果你的颜色处理方法返回的是tinycolor实例对象，记得调用toHexString()/toRgbString()等方法转换为可直接渲染的颜色字符串，避免渲染异常。

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