生命周期商店答案

【问题标题】：Lifecycle stores生命周期商店
【发布时间】：2021-05-26 20:53:53
【问题描述】：

是否有组件生命周期事件的存储？也就是说，而不是将函数传递给例如onMount，我可以改为await onMount()。 await tick() 似乎是最接近的东西，但我想知道是否有专门用于 onMount 事件的商店或创建该商店的方法。

我的用例是 Svelte 中的 Stripe Elements。

两个异步进程必须完成，我不能保证哪个会先发生：

Stripe 的 js 文件已加载（）
组件已渲染 (onMount)

而不是为这两种情况编写代码

let event1Happened = false, event2Happened = false;
onEvent1(() => { event1Happened = true; if (event2Happened) { render() } });
onEvent2(() => { event2Happened = true; if (event1Happened) { render() } });

我可以写一些类似的东西

onEvent1(() => { await event2; render(); })

或

await event1; await event2; render();?

或使用类似的事件修饰符

<svelte:head src=... on:load|mounted={render}>

【问题讨论】：

标签： svelte svelte-3

【解决方案1】：

我会为这个逻辑使用reactive statement。

<script>
    import { onMount } from 'svelte';
    
    let mounted = false;
    let scriptLoaded = false;
    
    onMount(() => { mounted = true; })
    // simulate a script load
    setTimeout(() => { scriptLoaded = true }, 500);
    
    // this block will run when mounted or scriptLoaded changes
    $: if (mounted && scriptLoaded) {
        render();
    }
    
    function render() {
        console.log('rendered');
    }
</script>

<h1>Hello world!</h1>

【讨论】：