如何在Svelte商店更新后重新触发if-else语句?

Question

我正在使用字符串列表作为我正在构建的组件(favourites)中的存储:

<script lang="ts">
let favorites: string[] = [];
let listingsList: any = [];

function favourite(listingID: string) {
// do some stuff
favourites.push(listingID) 
}
</script>

它跟踪某些组件ids，因此我可以根据id是否在列表中显示不同的button。

这个想法是当我点击按钮，收藏列表得到更新，然后另一个按钮应该显示:

{#each listingsList as listing}
{#if favorites?.includes(listing.id)}
<button class="btn btn-sm btn-secondary" on:click={() => favourite(listing?.id)}>Saved</button>
{:else}
<button class="btn btn-sm btn-primary" on:click={() => favourite(listing?.id)}>Save it!</button>
{/if}
{/each}

问题:

如果我单击按钮，我可以看到列表正在更新，并将其记录在控制台上，但按钮没有更改。如果我刷新页面，另一个按钮显示，如预期的那样。

我的问题是，这是预期行为吗?是否有办法再次触发if后列表得到更新，立即改变按钮?

Answer 1

正如Corrl在他的评论中指出的，问题是.push()不会触发更新

因为Svelte的反应性是基于赋值的，使用数组像.push()和.splice()这样的方法不会自动触发更新。需要后续的分配来触发更新。这个和更多的细节也可以在教程中找到。

解决方案是在更新后重新分配变量:

favorites.push(listingID);
favorites = favorites;