Svelte中如何让变量成为writable数组元素的引用而非副本？

首先明确一个JS基础：对象是引用类型，$players[0]和你赋值的player本质上指向同一个对象，修改player.name理应同步到$players[0].name。如果你的代码里没同步，要么是不小心克隆了对象（比如用{...$players[0]}），要么是对store的更新逻辑理解有误。

你遇到的核心问题其实是：$state($players[0])只是给player赋了初始值，它不会自动跟踪$players数组的后续变化（比如第一个元素被替换、数组长度改变），导致后续数组更新时player还停留在旧的引用上。

下面给两种解决方法：

方法1：用派生存储跟踪第一个元素 #

在全局store文件$lib/global.ts里，基于现有数组存储创建一个派生存储，专门指向第一个玩家：

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

export interface Player {
  id: number;
  name: string;
}

export const players = writable<Player[]>([{ id: 1, name: '初始玩家' }]);
// 派生存储自动跟踪原数组变化，始终返回第一个元素
export const firstPlayer = derived(players, $players => $players[0] ?? null);

在组件里直接使用$firstPlayer，它会自动同步数组的变化：

<script>
  import { firstPlayer, players } from '$lib/global';

  function changeName() {
    if (!$firstPlayer) return;
    // 用store的update方法修改，确保全局所有订阅组件都能收到更新通知
    players.update(p => {
      p[0].name = '新名字';
      return p;
    });
  }
</script>

<button on:click={changeName}>修改第一个玩家名字</button>
<p>当前玩家：{$firstPlayer?.name}</p>

方法2：组件内用响应式语句同步 #

如果不想修改全局store，在组件里用Svelte的响应式声明$:来跟踪数组变化：

<script>
  import { players } from '$lib/global';
  let player = $players[0];

  // 响应式跟踪$players，数组变化时自动更新player的引用
  $: player = $players[0] ?? null;

  function modifyName() {
    if (!player) return;
    // 直接修改属性会同步到数组元素，但仅当前组件模板会更新
    // 要全局同步的话还是要用players.update方法
    player.name = '组件内修改的名字';
  }
</script>

<button on:click={modifyName}>修改名字</button>
<p>player变量的名字：{player?.name}</p>
<p>数组第一个元素的名字：{$players[0]?.name}</p>

补充说明 #

Svelte的writable store是浅响应的：直接修改对象的嵌套属性时，当前组件的模板会更新，但其他订阅该store的组件不会收到变化通知。如果需要全局同步，必须调用players.update()方法并返回修改后的数组（哪怕是同一个数组，返回它也会触发订阅更新）。

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