Как вызвать функцию при изменении значения в подписанном магазине в Svelte?

Один из моих компонентов подписан на переменную в магазине. Всякий раз, когда в этом хранилище var происходит изменение, я хочу вызвать функцию.

store.js

    import { writable } from "svelte/store"; 
    export const comparedProducts = writable([1,2,3]);

Component.svelte

    import { comparedProducts } from "../stores.js";
    
    //if there is a change in $comparedProducts trigger this function eg. ([1,2])
    const someFunction = () => {
      //do something
    }

svelte svelte-3 svelte-component svelte-store
person rohanharikr    schedule 16.11.2020    source источник

Ответы (2)


arrow_upward
3
arrow_downward

в компоненте.svelte

    import { comparedProducts } from "../stores.js";
    
    //if there is a change in $comparedProducts trigger this function eg. ([1,2])
    const someFunction = () = >{
      // do something
    }
    
    // stores can be subscribed to using .subscribe()
    // each new value will trigger the callback supplied to .subscribe()
    
    let unsubscribeStore = comparedProducts.subscribe((currentValue) => {
        //currentValue == $comparedProducts
        someFunction()
    })

    // call unsubscribeStore() after finishing to stop listening for new values
person OmG3r    schedule 16.11.2020

arrow_upward
2
arrow_downward

Нашел более чистое решение

import { comparedProducts } from "../stores.js";
$: $comparedProducts, run();

function run(){
  //do something here
}
person rohanharikr    schedule 18.11.2020
comment
Не уверен, почему это заслуживает отрицательного голоса. Думаю, это чисто и в духе Svelte .. - person Guido Bouman; 12.01.2021
comment
Собственно, когда стоимость магазина ложная, это не сработает. Вам понадобится запятая вместо логического И: $: $comparedProducts, run(); Это обеспечит выполнение run функции всегда, независимо от значения хранилища. - person Guido Bouman; 12.01.2021