时间戳

首页 > 解决方案 > 使用 .set() 从 JS 组件更改 Svelte 存储不适用于对象

javascript - 使用 .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

谁能解释我在这里做错了什么？提前谢谢了！

标签： javascriptsveltesappersvelte-store

解决方案

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

当您这样做ui_vars.filter_extended时，将是undefined因为filter_extended不存在于writable.

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

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

推荐阅读