主页 / user-2033675

Zied Hamdi's questions

Martin Hope
Zied Hamdi
Asked: 2025-02-13 06:20:57 +0800 CST
  • 5

我有一个正确绑定到其父级的变量：其值在单击时会发生变化，并且该值在父级和绑定子级中均正确显示。您可以在 svelte 游乐场中 测试它： https://svelte.dev/playground/c2fea05c50394c1199d31aa525df5418 ?version=5.19.10

+页面.svelte

<script lang='ts'>
    import Foo from './Foo.svelte'
    
    let page = $state({value:12});  
    
    $effect(() => {
    console.log("Updating page: ", $inspect(page));
  });
</script>

<div>
  <Foo bind:page={page} />
    App page is {page.value}
</div>

Foo.svelte（子）

<script>    
    let {page =$bindable()} = $props();

</script>

<button onclick={()=>page.value = page.value+1}>
    Value in Foo is {page.value}: click me
</button>
<br/>

尽管正在重新渲染，但使用相同变化变量的 $effect() 不会被调用。我如何才能检测到我的页面发生了变化（我的想法是，我开发了一个 ts 文件，可以在更改时自动保存数据，但我找不到获取更改通知的方法。

附言：在商店中保存页面也需要我检测到发生了更改，并且由于我的对象有几十个字段，我不想在更改时手动触发事件。关于如何做到这一点有什么想法吗？

根据 brunnerh 答案的解决方案：

“仅仅引用对象不会触发任何事情（除非重新分配变量）。”

并说，让我们尝试一些愚蠢的事情（因为，如果该方法没有被调用，那么这永远不会发生，对吧？）。但它实际上解决了这个问题，因为效果现在被认为值得调用：

$effect(() => {
    console.log("Updating page: ", $inspect(page));
    autoSave.update(page = {...page})
});

不过这仍然非常违反直觉，我觉得这还不够明确。我想用句柄来表示“即使没有写入也会强制生效”会更好理解

svelte