Svelte 是否具有仅监听嵌套属性更改的机制？

Question

I need to do some logic on nested property change. I only found that thing to do that

$: c, console.log('updated');

This approach was suggested by official svelte developer from this Twitter thread . But svelte stores do not work properly with that. For instance I have following code:

<script>
    import { writable } from 'svelte/store';
    const s = writable({ x: 1, y: 2 });

    $: $s && console.log('store updated');
    $: $s.x && console.log('store x updated');
</script>

<button on:click={() => $s.y++}>
    Update y
</button> 

The $: $sx part will be triggered on change of $sy . How to avoid that??

REPL to play around.

PS VueJS has the feature @Watch('s.x') .

Answer 1

You can subscribe to the store per usual, but only do your logic if the property you're interested in changes like so:

    // this is the only bit relevant to this component
    let thingWeAreInterestedIn;
    
    // subscribe to changes in the store
    const unsubscribe = s.subscribe(val => {
        
        // but if there's no change to the property we're interested in. Do nothing
        if(val.y === thingWeAreInterestedIn) return;
        
        // else update it!
        thingWeAreInterestedIn = val.y
    })
    
    // this now only fires when $s.y is changed
    $: console.log('y updated', thingWeAreInterestedIn)

REPL here

Answer 2

You could work around that with the help of a reactive variable REPL

<script>
    import { writable } from 'svelte/store';
    const s = writable({ x: 1, y: 2 });

    $: $s && console.log('store updated');
    $: xRef = $s.x
    $: xRef && console.log('store x updated');
</script>

<button on:click={() => $s.y++}>
    Update y
</button>

Since the dependency xRef is now a primitive value who didn't change, the reactive log won't be triggered

Answer 3

In addition to the options presented in other comments, there are also npm packages that can create a store linked to the property of an object in another store. I make one such package, svelte-writable-derived .

import { propertyStore } from "svelte-writable-derived";
let xStore = propertyStore(s, "x");
let deepStore = propertyStore(s, ["deeply", "nested", "property"]);

If you prefer specifying a nested property by string instead of array, someone else made a svelte-keyed package that will do what you want.

Svelte by itself provides no such functionality as part of its philosophy to ship only as much code to end users as is needed, and no more. Sure, svelte-writable-derived is less than 1KB, but that's hundreds of bytes that developers who don't need this feature don't have to ship.