根据存储中的更新（svelte）更新数组中使用的值？答案

【问题标题】：Update values used in array based on update in store (svelte)?根据存储中的更新（svelte）更新数组中使用的值？
【发布时间】：2021-11-26 05:21:39
【问题描述】：

简而言之，我正在构建一个类似 mycolor.space 的 Web 应用程序，您可以在其中输入颜色的十六进制值，然后该应用程序会使用一个名为 tinycolor 的库输出一堆调色板，该库可以进行一些简单的亮化/色调变暗/旋转。

所以我能够处理我们将调用primaryColor 的存储值的所有绑定和订阅。当用户在输入字段中输入十六进制代码时，primaryColor 成功更新。我有一个名为Palettes.svelte 的苗条组件，它看起来像这样：

<script>
import tiny color from 'tinycolor2'

export let color

const palettes = [
  {
    name: 'Simple Gradient',
    colors: [
      tinycolor(color).colorMutationFunction1(),
      tinycolor(color).colorMutationFunction2(),
      .
      .
      .
      ]
  },
  .
  .
  .

]
</script>
<main>
  <h1>{color}</h1>
  {#each palettes as palette}
    {#each palette.colors as color}
      <div>{color}</div>
    {/each}
  {/each}
</main>

所以核心功能就在那里。它根据初始存储值生成调色板，该存储值位于 getgo 的数组中。问题是当用户更改输入中的十六进制颜色值时，palettes 数组中的值 color 不会响应式更新。该组件主体中的h1 标记可预见地确实与商店一起更新。我在这里和那里读到过，为了根据 svelte 中存储变量状态的变化迭代地更改数组值，您必须执行一些奇怪的语法来将数组设置为自身，例如palettes = palettes。但是，我只在函数的上下文中看到过这种情况。

如果有更多信息有任何见解，请告诉我。我的应用程序的其余部分正在更新和传递 store 变量就好了，所以我知道我只是缺少一些关于如何处理这个问题的基本知识。

【问题讨论】：

这是关于reactive declarations 的 Svelte 教程和文档中的一个部分 [$: 将语句标记为反应式](svelte.dev/docs#3_$_marks_a_statement_as_reactive)

标签： javascript svelte

【解决方案1】：

为此，您必须将palettes 明确标记为reactive，这意味着如果它基于的值发生变化，它将重新计算。

对此的一般语法是$: a = b，其中a 将始终在b（或等式右侧上的任何其他内容）发生变化时更新。

在您的情况下，语法将变为：

$: palettes = [
  {
    name: 'Simple Gradient',
    colors: [
      tinycolor(color).colorMutationFunction1(),
      tinycolor(color).colorMutationFunction2(),
  }
]

由于color出现在右侧，所以palettes会在颜色变化时重新计算。

【讨论】：