能否直接修改SvelteKit中derived store的值？

Derived Store本质是基于其他依赖Store计算生成的只读视图，本身不支持直接修改——你直接执行$tiles[n].x = 'something new'这类操作不仅不符合设计逻辑，而且下次依赖Store更新时，Derived Store会重新执行计算逻辑，覆盖你手动修改的内容，等于白改。

正确的解决思路只有一个：修改Derived Store所依赖的原始可写Store，因为Derived Store的所有数据都来自这些源头，只要源头更新，Derived Store会自动同步生成新的计算结果。

具体实现示例 #

假设你的tiles是从一个可写的sourceTiles Store派生而来：

import { writable, derived } from 'svelte/store';

// 原始可写Store，存储基础数据
const sourceTiles = writable([
  { id: 1, x: '初始值1' },
  { id: 2, x: '初始值2' }
]);

// Derived Store：基于sourceTiles做计算转换
const tiles = derived(sourceTiles, $source => {
  // 这里可以做任意计算，比如添加额外字段、过滤数据
  return $source.map(tile => ({ ...tile, displayText: `Tile ${tile.id}: ${tile.x}` }));
});

要修改某个tile的x属性，直接操作sourceTiles即可：

// 修改索引为0的tile的x值
sourceTiles.update(currentTiles => {
  // 浅拷贝数组，避免直接修改原数据（符合Immutable原则）
  const updatedTiles = [...currentTiles];
  updatedTiles[0].x = '新的X值';
  return updatedTiles;
});

复杂场景：自定义Store封装逻辑 #

如果你的Derived Store计算逻辑复杂，或者不想对外暴露原始Store，可以封装一个自定义Store，只对外提供修改方法和派生后的订阅接口：

import { writable, derived } from 'svelte/store';

function createTileStore() {
  // 内部维护原始可写数据
  const { subscribe: rawSubscribe, update } = writable([
    { id: 1, x: '初始值1' },
    { id: 2, x: '初始值2' }
  ]);

  // 派生计算后的tiles
  const tiles = derived(rawSubscribe, $rawData => {
    return $rawData.map(tile => ({
      ...tile,
      displayText: `Tile ${tile.id}: ${tile.x}`
    }));
  });

  // 对外暴露的修改方法：按ID更新tile的x值
  function updateTileX(tileId, newX) {
    update(current => {
      return current.map(tile => {
        if (tile.id === tileId) {
          return { ...tile, x: newX };
        }
        return tile;
      });
    });
  }

  return {
    // 对外只暴露派生后的tiles的订阅
    subscribe: tiles.subscribe,
    updateTileX
  };
}

// 实例化自定义Store
export const tileStore = createTileStore();

在组件中使用：

<script>
  import { tileStore } from './stores.js';
</script>

<button on:click={() => tileStore.updateTileX(1, '修改后的X值')}>
  修改ID为1的Tile
</button>

{#each $tileStore as tile}
  <div>{tile.displayText}</div>
{/each}

记住，Derived Store的核心作用是映射和转换其他Store的状态，所有状态变更都应该回溯到原始的可写Store，这样才能保证响应式逻辑的一致性。

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