Update an custom store object-CodePudding

I have a store

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

and want to read and change the value of an attribute of the store when someone clicks a checkbox, like here:

<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 >
  Einstellungen zur Organisation
</div>
<div >
  <label  for="vatObligation">Ust-pflichtig</label>
  <input  type="checkbox" bind:checked={vatObligation}/>
</div>
<div >
  <label  for="simplifiedAccounting">EüR-berechtigt</label>
  <input  type="checkbox" bind:checked={simplifiedAccounting}/>
</div>

When I toggle the checkboxes the given code logs

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

As you can see, the attributes of the store are not updated. I'd like to directly wire it to the checkbox but I haven't managed to do so. When I try I run into

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

What would be a good way to update the store value. The goal is to catch an update and POST the whole config. Thank you in advance!

CodePudding user response：

There's lots of ways you can update a store dynamically from an input, including directly or indirectly via a function.

Given a simple writeable store...

stores.js:

import {writable} from "svelte/store";

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

... here's two examples of updating the values, directly (a) or indirectly (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} />

REPL: https://svelte.dev/repl/fb09138522d84e7e9fbb642193e8258c?version=3.45.0

The example for b waits to update the store, which may not be what you want.

If you can send to API via a "Save" button, then the example for a may be all you need, calling a function via the button to send the store data to the API etc.

These are just super simple examples, I tend to use functions on custom stores for saving to the API etc and using the store's update() function to sync results.