两个组件使用writable store时点击函数设置store失败问题

核心问题 #

核心问题出在**afterUpdate中重复订阅componentB**：每次组件更新都会生成新的订阅，多个订阅回调同时修改store，既会引发更新冲突，还会造成内存泄漏，直接干扰storePages.set()的正常执行。另外，afterUpdate的执行时机和订阅回调的触发顺序混乱，也会让点击函数的设置被覆盖。

修复方案 #

方案1：正确管理订阅生命周期（保留afterUpdate场景） #

在组件中保存订阅的取消函数，每次afterUpdate前先清理旧订阅，避免重复订阅：

<script>
import { writable, afterUpdate, onDestroy } from 'svelte/store';

const store = writable(null);
const storePages = writable(null);
let componentBUnsubscribe = null;

// 组件A的订阅逻辑保持不变
componentA.subscribe((state) => {
    const resultsA = /* 你的处理逻辑结果 */;
    store.set(resultsA);
});

afterUpdate(() => {
    // 先清理旧订阅，避免重复触发
    if (componentBUnsubscribe) {
        componentBUnsubscribe();
    }
    // 重新订阅componentB
    componentBUnsubscribe = componentB.subscribe((state) => {
        // 立即获取store当前值并执行过滤
        store.subscribe((storeValue) => {
            if (storeValue) {
                const resultsB = /* 基于storeValue和componentB state的过滤逻辑 */;
                store.set(resultsB);
            }
        })(); // 加()立即执行，避免错过当前store值
    });
});

// 组件销毁时清理订阅，防止内存泄漏
onDestroy(() => {
    componentBUnsubscribe?.();
});

function page({ detail }) {
    // 立即获取store当前值并设置storePages
    store.subscribe((value) => {
        const someValue = /* 基于value的处理逻辑 */;
        storePages.set(someValue);
    })();
}
</script>

方案2：用derived store替代手动订阅（更优雅的Svelte方式） #

利用Svelte的derived store自动跟踪依赖状态，无需手动管理订阅和更新时机：

<script>
import { writable, derived } from 'svelte/store';

// 假设componentA、componentB是对应的store
const componentAStore = writable(null);
const componentBStore = writable(null);

// 自动根据两个组件的状态生成过滤结果
const store = derived(
    [componentAStore, componentBStore],
    ([$componentA, $componentB]) => {
        if (!$componentA || !$componentB) return null;
        // 在这里执行你的过滤逻辑
        const filteredResult = /* 结合$componentA和$componentB的处理 */;
        return filteredResult;
    }
);

const storePages = writable(null);

function page({ detail }) {
    // 直接获取store当前值设置storePages
    store.subscribe((value) => {
        const someValue = /* 基于value的处理逻辑 */;
        storePages.set(someValue);
    })();
}
</script>

关键注意点 #

• 绝对不要在生命周期函数中重复创建订阅，必须清理旧订阅，否则会引发多次回调触发的混乱。
• derived store是Svelte处理依赖状态的最佳实践，它会自动跟踪依赖变化，只在必要时重新计算，避免手动订阅的繁琐。
• 如果需要立即获取store的当前值，可以在订阅后加()立即执行回调（示例中store.subscribe(...)()的写法）。

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