Svelte 派生存储和数组排序

Question

我设置了一个商店，其中包含从我的API加载的游乐设施列表：

const loadRides = () => client.service('rides').find({
query: {
$sort: {
date: -1,
}
}
});
const createRides = () => {
const { subscribe, update } = writable([], async (set) => {
try {
const rides = await loadRides().then((result) => result.data);
set(rides);
} catch (e) {
console.error(e);
}
// Socket update binding?
});
subscribe((rides) => console.debug('rides', rides));
return {
subscribe,
refresh: () => loadRides().then((result) => update(() => result.data)),
};
};
export const rides = createRides();

然后，我为过去和未来的游乐设施设置了两个派生商店：

export const pastRides = derived(
rides,
($rides) => $rides
.filter((ride) => ride.steps.every((step) => step.doneAt))
,
);
export const comingRides = derived(
rides,
($rides) => $rides
.filter((ride) => ride.steps.some((step) => !step.doneAt))
.sort((rideA, rideB) => {
const compare = new Date(rideA.date) - new Date(rideB.date);
console.log(rideA.date, rideB.date, compare);
return compare;
})
,
);

第二个方法上的sort方法没有任何效果。

所以我试图把这种方法放在filter方法之前。它有效，但它也排序$pastRides.事实上，它正在对完整的$rides数组进行排序，这是有意义的。

但我不明白为什么filter之后的sort不起作用。

我错过了什么？

Answer 1

Array.sort是可变的。这意味着，当你调用rides.sort时，它会对rides进行排序和修改，并返回排序后的rides。

使用derived(rides, ($rides) => ... )时，收到的$rides是调用set(rides)的原始rides数组。因此，您可以想象pastRides和comingRides都接收了相同的$rides阵列。

您可以在此 repl 中观察到此行为

为了不让两个derived相互干扰，您可以创建一个新数组并对新数组进行排序：

const sorted_1 = derived(array, $a => [...$a].sort());

您可以在此REPL中尝试此操作。