对象在存储和响应语句中

Question

我有一个存储对象。我希望能够有几个响应性语句，每个语句对对象的给定属性的变化作出反应。

下面是一个示例(REPL: https://svelte.dev/repl/38f15dc921034532be8dd2d774ca2096?version=3.48.0):

)

<script>
import { writable } from "svelte/store";
const catalogue = writable({ currentBook: "War'n'Peace", currentFood: "Authentic Napoli frozen pizza" });
$: $catalogue.currentBook, console.log("Current book has changed");
$: $catalogue.currentFood, console.log("Current food has changed");
function changeBook() { $catalogue.currentBook = "Putin's People"; }
function changeFood() { $catalogue.currentFood = "Authentic Valencia chorizo and mussels paella"; }
</script>
<button on:click={changeBook}>Change book</button>
<button on:click={changeFood}>Change food</button>

例如，单击"change food"会触发两个反应性语句，而不仅仅是一个用于对food属性的更改做出反应的语句。

我不确定存储和反应性语句是如何一起发挥作用的，但似乎反应性即使没有变量赋值也会发生。不幸的是，对象中的任何更改似乎也会触发引用该存储的所有反应性语句，这不是我所希望的。

你能根据这些思路提出一个解决方案，或者其他方法吗?

Answer 1

在您的代码中，依赖项是存储，没有任何额外的代码，这是唯一具有更改检测的东西。你可以添加额外的变量来分离属性，得到更细粒度的反应语句:

$: ({ currentBook, currentFood } = $catalogue);
$: currentBook, console.log("Current book has changed");
$: currentFood, console.log("Current food has changed");

这里的日志语句不再直接依赖于存储，所以它们不会触发每个存储更改。

也可以使用派生存储:

const currentBook = derived(catalogue, c => c.currentBook);
const currentFood = derived(catalogue, c => c.currentFood);
$: $currentBook, console.log("Current book has changed");
$: $currentFood, console.log("Current food has changed");