Svelte动作不能与非Svelte JavaScript库一起工作

Question

我有一个博客卡列表，我已经转换为使用Splide旋转木马。每当切换到另一个页面时，我都希望删除现有的Splide对象。我想用苗条的行动来实现这一目标,但不能做。

<script>
const splideAction = async (node, props)=>{

const module = await import("@splidejs/splide");
const Splide = module.default;
const splide_css = await import("@splidejs/splide/dist/css/splide.min.css");
const carousel = new Splide(".splide",{
perPage:3,
type:"loop",
rewind: true,
permove: 1,
autoplay: true,
breakpoints: {
750: {
perPage: 1
},
800:{
perPage: 2
}
}
}).mount();
return {
updated(){
carousel.update();
console.log("Updated")
},
destroy(){
carousel.destroy();
console.log("destroy")
}
}
}
</script>

<div class="splide" use:splideAction>
<div class="splide__track" >
<div class="splide__list" >
{#each [...metadata.related_articles] as article (article.id)}
<div  class="splide__slide flex"><Card 
title = "{article.title}"
date = "{article.date}"
slug = "{article.slug}"
category= "{article.category}"
image = "{article.image}"/></div>

{/each} 
</div>
</div>

</div>

当我点击另一个博客的卡片时，我生成了一个新的Carousel，旧的仍然在那里，我如何删除它破坏

Answer 1

几点:

1. 我会在你的组件中同步导入Splide模块，而不是动态导入，所以它在组件渲染时就准备好了。
2. 我不确定异步导入CSS是否会像那样工作——这可能取决于你的捆绑器设置。无论哪种方式，我都会在动作之外导入它，通过将它与CSS的其余部分捆绑在一起或通过CDN。在下面的例子中，我使用<svelte:head>从CDN加载它。
3. 我没有看到"updated"函数在Splide的API，所以我不确定carousel.update()会做什么。我认为你不需要返回"update"方法，因为您的操作没有接受任何参数。update方法是用来对你动作的参数变化做出反应的。
4. 你错误地存储了对carousel的引用——你存储了对mount返回值的引用，而不是构造函数。因此，在错误的变量上调用destroy。试试这样做:

const carousel = new Splide();
carousel.mount();

虽然您的问题缺少一些上下文，但以下组件似乎可以工作。我简化了模板，因为我无法访问文章数据。您可以在Svelte REPL中实时查看它。我添加了一个按钮来删除组件，这样你就可以看到旋转木马被破坏了。

<script>
import Splide from '@splidejs/splide';

function carousel(node) {
const splide = new Splide(node, {
perPage: 3,
type: "loop",
rewind: true,
permove: 1,
autoplay: true,
breakpoints: {
750: {
perPage: 1
},
800: {
perPage: 2
}
}
});
splide.mount();

return {
destroy: () => {
splide.destroy();
console.log('destroyed');
}
}
}
</script>
<svelte:head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.0.9/dist/css/splide.min.css">
</svelte:head>
<div class="splide" use:carousel>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
</div>
<style>
li {
height: 300px;
background: lightblue;
}
</style>