Question

我从Sapper开始^^'，我试图使用派生商店来查找和预加载一些图像，如下所示：

export const backgroundDatas = derived([id, backgroundsRegistry], ([$id, $backgroundsRegistry]) => {
    let datas = $backgroundsRegistry ? $backgroundsRegistry[$id] : null;

    if(datas && !datas.preload)
    {
        datas.preload = new Image();
        datas.preload.src = datas.url;
    }

    return datas;
});

但是似乎我无法在组件<script>的第一次执行中使用该派生存储（错误Image is not defined，因为new Image()在服务器上没有意义，似乎是逻辑x），所以我虽然可以依靠组件内部的reactiv语句来使用该存储。这是我所做的：

$: if (currentBackgroundDatas != $backgroundDatas)
  {
    // make some animation to change background
  }

问题是支票currentBackgroundDatas != $backgroundDatas似乎在服务器上进行了评估，因此抛出了Image is not defined错误。

有没有使用该派生商店的安全方法？以一种更通用的体系结构方式，如何防止在服务器上调用客户端javascript？

Answer 1

使用onMount

import { onMount } from 'svelte';

onMount(() => {

  // will run on the client

});

Sapper：阻止客户端JavaScript在服务器上运行

1 个答案: