Question

https://github.com/sveltejs/realworld/blob/master/src/routes/_components/ArticleList/index.svelte

let query;
let articles;
let articlesCount;
$: {
    const endpoint = tab === 'feed' ? 'articles/feed' : 'articles';
    const page_size = tab === 'feed' ? 5 : 10;
    ...
    query = `${endpoint}?${params}`;
}
$: query && getData();
async function getData() {
    ({ articles, articlesCount } = await api.get(query...));
}

当页面大小，端点或其他查询参数更改时，此调用REST API。

对于上市实体，我也有类似情况，并且这样做：

 $: activePage && sort && pageSize && getData();

这一切都很好（尽管&&是一个奇怪的结构，说我想在getData()，activePage或sort更改时执行pageSize。

使用这种方法时，如果您还希望包含评估为Falsy的变量，则会出现问题。

例如，添加searchQuery文本：

let searchQuery = "";
$: searchQuery && activePage && sort && pageSize && getData();

由于searchQuery的评估结果为false，现在的反应性不起作用。

我们可以这样做：

$: activePage && sort && pageSize && getData();
$: searchQuery, getData();

要分开观察组，但使用此getData（）会被调用2次。

有人知道更好的方法吗？

Answer 1

您可以将,和&&语法与任意数量的变量和条件一起使用

$: searchQuery, activePage && sort && pageSize && getData();

$: searchQuery, activePage, sort, pageSize, getData();

都是有效的，对于第二个变量，如果其中一个变量为假，则不会有问题，而第一个变量可让您确保某些变量不是假的。

Answer 2

为了使事情更清楚，您可以将观察到的变量作为参数传递给函数：

$: onChange(searchQuery, activePage, sort, pageSize);

function onChange(...args) {
  getData();
}

因此，您不必担心某些变量是否为假。

当变量组中的任何一个发生变化时，执行函数

2 个答案: