更新自定义商店对象

Question

我有一家商店

export const tenantStore = writable({
    name: undefined,
    vatObligation: undefined,
    simplifiedAccounting: undefined
  })

并希望在有人单击复选框时读取和更改商店属性的值，如下所示：

<script>
    import { tenantStore } from '../../store/stores.js'
    import { updateTenant } from '../../api/api.ts'

    let vatObligation = Boolean($tenantStore.vatObligation)
    let simplifiedAccounting = Boolean($tenantStore.simplifiedAccounting)

    $: {
        console.log("vatObligation: " + $tenantStore.vatObligation)
        console.log("simplifiedAccounting: " + $tenantStore.simplifiedAccounting)
        console.log(vatObligation)
    }
</script>

<div class="headline">
  Einstellungen zur Organisation
</div>
<div class="line">
  <label class="description" for="vatObligation">Ust-pflichtig</label>
  <input class="input" type="checkbox" bind:checked={vatObligation}/>
</div>
<div class="line">
  <label class="description" for="simplifiedAccounting">EüR-berechtigt</label>
  <input class="input" type="checkbox" bind:checked={simplifiedAccounting}/>
</div>

当我切换复选框时，给定的代码记录

vatObligation: true
simplifiedAccounting: true
true
vatObligation: true
simplifiedAccounting: true
false

如您所见，商店的属性没有更新。我想直接将它连接到复选框，但我还没有成功。当我尝试运行进入

can't assign to property on true: not an object svelte

更新商店价值的好方法是什么。目标是捕获更新和 POST 整个配置。提前致谢！

Answer 1

有很多方法可以根据输入动态更新商店，包括直接或间接通过函数。

给定一个简单的可写存储...

stores.js:

import {writable} from "svelte/store";

export const writableStore = writable({
    a: true,
    b: true
});

...这是直接 (a) 或间接 (b) 更新值的两个示例：

App.svelte:

<script>
    import {writableStore} from "./stores.js";
    
    let b = $writableStore.b;
    
    // This function could be on a "custom" store.
    function updateB( value ) {
        // Validate value in context of other values?
        // Send to API.
        // Result good ... update store.
        $writableStore.b = value;
        
        return $writableStore.b;
    }
    
    $: bCurrent = updateB( b );
    </script>

<h2>A: {$writableStore.a}</h2>
<label for="a">Toggle A</label>
<input type="checkbox" id="a" bind:checked={$writableStore.a} />

<h2>B: {bCurrent}</h2>
<label for="b">Toggle B</label>
<input type="checkbox" id="b" bind:checked={b} />

回复：https://svelte.dev/repl/fb09138522d84e7e9fbb642193e8258c?version=3.45.0

b的示例等待更新商店，这可能不是您想要的。

如果您可以通过“保存”按钮发送到 API，那么 a 的示例可能就是您所需要的，通过按钮调用函数将存储数据发送到API等

这些只是超级简单的例子，我倾向于使用自定义商店的功能来保存到 API 等，并使用商店的 update() 功能来同步结果。

更新自定义商店对象

Update a custom store object

typescript

svelte