svelte 不断更新 store var，无需点击更新

如何解决svelte 不断更新 store var，无需点击更新

我的应用无需点击按钮即可自动更新 $content 值。我知道这是一个简单的问题，但我不知道为什么，我正在学习苗条。

App.svelte

<script>
    import { content } from './store.js';
    import Item from './Item.svelte';


    $content = [{ id:0,obj: "Fell free to browse any category on top." }];

    function addContent(value) {
        $content = [{ id:0,obj: value}]
    }
</script>
<li><button on:click={addContent("Home Page")}>Home</button></li>
<li><button on:click={addContent("Products Page")}>Products</button></li>

<div class="Content">
    <p>Fell free to browse any category on top.</p>
    {#each $content as item}
        <p><svelte:component this={Item} objAttributes={item} /></p>
    {/each}
</div>

store.js

import { writable } from 'svelte/store';
export let content = writable({});

Item.svelte

<script>
    import { fade } from 'svelte/transition';
    export let objAttributes = {};
    
</script>
<p transition:fade>
    {objAttributes.obj} 
    {#if objAttributes.otherattrib}<em>{objAttributes.otherattrib}</em>{/if}
</p>

解决方法

这是因为您的 on:click 事件定义错误。 on:click 将这样的函数作为参数

<button on:click={functionGoesHere}>

或者，如果你想内联

<button on:click={() => { }>

在您的情况下发生的情况是您直接调用一个函数，然后单击按钮时将调用该函数的结果。你可以在这个例子中看到：

<script>
  function createFn() {
    return () => console.log('logging this')
  }
</script>
<button on:click={createFn}>Click here</button>

在本例中，函数 () => console.log('logging this') 将附加到按钮上。

回到您的代码，通过将其设置为函数而不是函数调用可以轻松解决此问题：

<li><button on:click={() => addContent("Home Page")}>Home</button></li>