使用 .set() 从 JS 组件更改 Svelte 存储不适用于对象

问题描述

我对 svelte/Sapper 有点陌生，我正在尝试从 JS 组件更新 svelte 存储。

设置和获取值工作正常只要它们是没有“深度”/嵌套对象的常规变量。

我不确定我是否做错了什么，或者是否真的没有办法在不替换整个对象的情况下更改对象的特定键。

---

让我解释一下我的意思：

stores.js

import { writable } from 'svelte/store'

export const ui_vars = writable({
    filter_extended: false,menu_extended: false,loading: { products: true }
})

export const simple_var = writable(false)

---

**test.js**

import { get } from 'svelte/store';
import { simple_var,ui_vars } from "../stores";

// WORKING
console.log(get(simple_var)); // false
simple_var.set(true); // alters the simple_var from false to true (as expected)
console.log(get(simple_var)); // true

// NOT WORKING
console.log(get(ui_vars)); // outputs the object as in store
ui_vars.filter_extended.set(true); // SHOULD ALTER the ui_vars.filter_extended from false to true,but throws Error instead,ERROR: Uncaught (in promise) TypeError: (intermediate value).filter_extended is undefined
console.log(get(ui_vars)); // should output the altered object

错误：

Uncaught (in promise) TypeError: (intermediate value).filter_extended is undefined

谁能解释一下我在这里做错了什么？ 非常感谢！

解决方法

.set 是一个存在于 writable 上的函数。

当您执行 ui_vars.filter_extended 时，它将是 undefined，因为 filter_extended 不存在于 writable。

如果您想将 filter_extended 设置为 true，我会这样做：

ui_vars.update(x => {
     x.filter_extended = true;
     return x;
});