如何在Svelte Store的right方法触发时调用组件的handleNextImage函数？

你的代码存在两个关键问题：

1. Store 的 right 方法定义中接收了回调参数 cb，但内部并未调用这个回调，导致组件传入的函数永远不会执行。
2. 组件在模块级别直接调用 myStore.right(...)，这会在组件初始化时就执行一次，而非在 right 方法被触发时响应。

下面给出两种可行的实现方式：

方案一：在 Store 的 right 方法中执行传入的回调 #

修改 Store，让 right 方法完成内部逻辑后主动调用传入的回调函数：

// myStore.js
import { writable, update } from 'svelte/store';

const createMyStore = () => {
    const store = writable({
        Rows: [],
    });

    const { subscribe } = store;

    return {
        subscribe,
        right: (cb) => {
            update((x) => {
                // 这里编写你的原有业务逻辑，比如修改Rows数据
                // ....
                return x;
            });
            // 执行组件传入的回调
            typeof cb === 'function' && cb('可传入自定义消息');
        },
    };
};

export const myStore = createMyStore();

组件中，在需要触发 right 动作的时机（比如按钮点击）调用方法并传入回调：

<!-- Component.svelte -->
<script>
import { myStore } from '@screens/home/myStore';

const handleNextImage = () => {
    console.log('执行切换下一张图片的逻辑');
    // 你的业务代码
};

// 绑定到按钮点击事件，触发Store的right方法
const handleRightAction = () => {
    myStore.right(() => {
        console.log('Store的right方法已执行');
        handleNextImage();
    });
};
</script>

<button on:click={handleRightAction}>右移切换图片</button>

方案二：用额外 Store 订阅动作触发事件（适合多组件响应） #

如果需要多个组件都响应 right 方法的触发，推荐创建一个专门的动作通知 Store：

// myStore.js
import { writable, update } from 'svelte/store';

const createMyStore = () => {
    const store = writable({
        Rows: [],
    });
    // 创建用于通知right动作触发的Store
    const rightTrigger = writable(null);

    const { subscribe } = store;

    return {
        subscribe,
        // 暴露订阅right动作的方法
        subscribeRight: rightTrigger.subscribe,
        right: () => {
            update((x) => {
                // 原有业务逻辑
                // ....
                return x;
            });
            // 触发动作通知（用时间戳确保每次更新都能被订阅捕获）
            rightTrigger.set(Date.now());
        },
    };
};

export const myStore = createMyStore();

组件中订阅这个动作 Store，每次触发时自动执行 handleNextImage：

<!-- Component.svelte -->
<script>
import { myStore } from '@screens/home/myStore';

const handleNextImage = () => {
    console.log('执行切换下一张图片的逻辑');
    // 你的业务代码
};

// 订阅right动作，每次触发时执行函数
myStore.subscribeRight(() => {
    console.log('Store的right方法已执行');
    handleNextImage();
});

// 触发right方法的示例
const handleRightAction = () => {
    myStore.right();
};
</script>

<button on:click={handleRightAction}>右移切换图片</button>

内容的提问来源于stack exchange，提问作者lache