javascript - 如何在带有参数的苗条商店中制作自定义方法？

Question

我想制作可以这样调用的自定义苗条商店：

$myStore.changeValue("my new value") // this would set new value to writable store
$mystore // this would return current value of the store

在 Svelte 有可能吗？

Answer 1

如果可以的话，我会推荐使用内置set方法。

const currentValue = $myStore;
myStore.set('my new value');

请注意，您仅$myStore在访问值时使用语法，而不是在对其调用方法时。在幕后，这订阅了 store。

如果要在商店中定义新方法，可以将其添加到导出的商店中。商店只需要定义一个subscribe方法来履行商店合同。

import { writable } from 'svelte/store';

const store = writable('This is a test');

export default {
    subscribe: store.subscribe,
    changeValue: store.set
}

然后可以在您的组件中调用它。

<script>    
    import myStore from './myStore.js';
    
    function handleClick() {
        myStore.changeValue('new value');
    }
</script>

<h1>myStore: {$myStore}!</h1>

<button on:click={handleClick}>
    Update store
</button>

Answer 2

试试这个方法

// store.js
import { writable } from 'svelte/store';
    
    export function MyStore(value) {
      const { subscribe, set, update } = writable(value)
    
      return {
        subscribe,
        set,
        update,
        changeValue: function (value) {
          // put your logic here
    
          // call update method to make the store reactive when the value get changed
          update((oldValue) => value)
        },

      }
    }

使用自定义商店：

<script>
   // App.svelte
   import {MyStore} from './store.js'

   const myStore = MyStore("Empty")
</script>

<button on:click={e=> (myStore.changeValue((new Date()).toString()))}>
   Store: {$myStore}
</button>