从JS组件修改Svelte Store嵌套对象属性时.set()报错咨询

你这报错完全是把Store本身和它内部存储的内容搞混了：

• ui_vars本身是可写Store实例，并不是初始化时传入的普通JS对象。Store实例只会暴露set、update、subscribe三个自带方法，根本不会挂载你塞进去的filter_extended、menu_extended这类业务属性，所以ui_vars.filter_extended本身就是undefined，对着undefined调用.set()方法，自然会抛出类型错误。
• 之前修改simple_var能正常运行，是因为你直接对Store实例本身调用了它自带的set方法，属于正确用法，和它存储的是布尔值没有关系。

修改Store中存储对象的嵌套属性，不需要从零重写整个对象，但必须通过Store暴露的方法触发更新通知，不能直接改动Store内部缓存的原对象引用：

方法1：使用Store自带的update方法 #

ui_vars.update(state => {
  // 返回全新的状态对象，不要直接修改传入的原state
  return {
    ...state, // 先完整保留原有所有属性，省去重复编写全量字段的工作
    filter_extended: true, // 单独覆盖需要修改的属性
    // 修改更深层嵌套属性时逻辑完全一致，先展开原有嵌套对象再覆盖
    loading: {
      ...state.loading,
      products: false
    }
  }
})

注意：Svelte Store默认通过对象引用判断状态是否变化，如果你直接修改原对象属性、不返回新对象，Store不会触发订阅组件的重渲染，所有改动都是无效的。

方法2：取出当前值修改后通过set写回 #

如果觉得update的回调写着别扭，也可以先取出当前存储值，修改完成后再用set方法写回Store：

// 获取当前Store缓存的最新状态
const currentState = get(ui_vars)
// 组装新的状态对象
const newState = {
  ...currentState,
  filter_extended: true
}
// 将新状态写入Store触发更新
ui_vars.set(newState)

• 不要图省事直接修改取出的原对象属性后不触发更新：比如写get(ui_vars).filter_extended = true，这种操作只会改动Store内部缓存的原始对象，不会触发更新通知，订阅组件完全感知不到变化，属于无效操作。
• 如果嵌套层级特别深，每次写多层对象展开的语法太繁琐，可以考虑把深层业务状态拆成独立的Store（比如把loading单独定义为可写Store），从根源上避免嵌套修改的问题。

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