Svelte可写writable store的userSettings值前端未正确更新问题求助

问题根因 #

• Svelte 的 writable store 采用引用相等判断触发更新，当你调用set方法传入的对象和 store 当前持有的对象是同一个引用时，会跳过更新通知，所以前端不会响应变化。
• 你代码里loadedModule更新正常是因为每次set都传入了Module.fromType(res)返回的全新实例，引用发生了变化，所以可以正常触发更新；而userSettings你是直接修改原有对象的属性，再把同一个引用的对象传入set，所以无法触发更新。
• 额外问题：你在file.ts中使用的this.userSettings是本地维护的快照副本，很容易和 store 实际值产生不同步，不建议这种用法。

可行解决方案 #

方案1：使用 store 自带的update方法更新（推荐） #

直接修改file.ts中的zoomIn逻辑，通过update拿到 store 最新值，返回新对象触发更新：

import { userSettings } from './stores'

const zoomIn = () => {
    console.log("+")
    userSettings.update(currentSettings => {
        // 解构创建新对象，打破引用相等
        return {
            ...currentSettings,
            zoomLevel: Math.min(currentSettings.zoomLevel + 1, 5)
        }
    })
}

方案2：修改后传入新对象调用set #

如果你要保留本地快照的写法，在set时创建新对象即可：

const zoomIn = () => {
    console.log("+")
    this.userSettings.zoomLevel++
    if (this.userSettings.zoomLevel > 5) this.userSettings.zoomLevel = 5
    // 解构生成新对象传入set
    userSettings.set({...this.userSettings})
}

额外优化建议 #

不建议在 store 外部维护状态快照（比如stores.ts里的全局user变量、file.ts里的this.userSettings），如果需要临时获取 store 最新值，可以使用svelte/store提供的get方法：

import { get } from 'svelte/store'
import { userSettings } from './stores'

// 随时获取最新值
const currentSettings = get(userSettings)

修改完成后触发更新时，stores.ts中userSettings的订阅回调会正常打印new settings updated，前端Svelte组件也会同步响应变量变化。

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