Svelte Store中更新数组最后一个对象属性无响应如何解决

• 核心原因是Svelte的writable store响应式更新依赖显式的赋值/更新操作触发通知，你在moveBlack方法中仅修改了数组最后一项对象的black_move属性，没有对$writableArray本身执行赋值操作，也没有调用store的更新方法，store不会向外推送更新事件，因此视图无法感知到数据变化。
• 白方走棋方法中你用扩展运算符重新赋值了整个数组，触发了store的更新通知，所以之前的黑方修改会在这一步同步到视图。

你可以任选以下任意一种方案修改moveBlack方法即可解决问题：

方案1：修改后触发赋值检测 #

修改属性后重新给$writableArray赋值，触发store的更新检测：

const moveBlack = () => {
    $writableArray.at(-1).black_move = 'b1-b2'
    // 显式赋值触发更新通知
    $writableArray = $writableArray
}

方案2：不可变方式更新数组 #

通过map方法生成新数组替换旧数组，符合不可变数据规范，避免意外副作用：

const moveBlack = () => {
    $writableArray = $writableArray.map((item, index, arr) => 
        index === arr.length - 1 ? {...item, black_move: 'b1-b2'} : item
    )
}

方案3：调用store原生update方法 #

直接调用store的update方法，执行修改后返回数组即可自动触发更新：

const moveBlack = () => {
    writableArray.update(arr => {
        arr.at(-1).black_move = 'b1-b2'
        return arr
    })
}

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