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

Question

我是 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

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

Answer 1

.set 是一个存在于 writable.

上的函数

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

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

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

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

Altering Svelte stores from JS component with .set() not working for objects

javascript

svelte

svelte-store

sapper