Vue3排序计算数组答案

【问题标题】：Vue3 sort computed arrayVue3排序计算数组
【发布时间】：2021-02-02 13:42:00
【问题描述】：

我目前正在使用 Vue3 开发一款带有自上而下地图和单位的游戏。我有一个单位商店，我将所有单位对象保存在一个数组中，每个单位都根据其坐标放置在地图上。我的商店中有一种方法可以检索同一坐标上的所有单位：

public getUnitsAt(coordinates: Coordinates): Array<Unit> {
    return this.state.units.filter((unit) => unit.coordinates.x === coordinates.x && unit.coordinates.y === coordinates.y);
}

在大多数情况下，这足以在列表中显示这些单位。现在我介绍了带有自己的城镇视图组件的城镇，我想显示城镇“外部”的单位，但仍然在相同的坐标上。所以我用这个：

const outsideUnits = computed(() => unitStore.getUnitsAt(town.coordinates));

到目前为止一切顺利，但现在我希望能够通过告诉特定单元移动到前面来对这些外部单元进行排序。问题是这个数组已经是来自商店的过滤数组副本。所以我可能可以对这个计算属性进行排序，但是一旦将另一个单元添加到存储中，它就会重新计算并且我的订单丢失了。任何想法如何我仍然可以拥有最新的单位数组，但能够进行排序？

如果一个单位从附近的场地移动到同一场地，它应该自动在前面。

【问题讨论】：

你能澄清一下你所说的排在前面是什么意思，你的意思是排在第一位吗？您是否还担心内存或 CPU 效率低下？
@Daniel 是的，在索引 0 处，所以我会取消新项目。记忆只是一个小问题。只要我使用对象作为条目排序应该只对引用而不是整个对象进行排序。

标签： vuejs3

【解决方案1】：

根据您关于内存是一个小问题的评论，我认为这个问题/解决方案就像一个文档存储 noSQL DB，其中优化针对读取，这意味着更多的工作是在写入前完成的（有时会在多个位置更新相同的数据），因为这个想法是写入发生的频率低于读取发生的频率。

注意事项

一个方法，比如getUnitsAt，结果不会被缓存，所以每次调用它都会运行函数。
如果您希望数据是持久的，那么您需要存储它。

我建议使用将所有相关图块信息存储在对象中的计算值。

例如unitOrder['12_6'] 将返回[unit6, unit3, unit4]，其中12_6 将是x 和y 坐标。（但最好通过posToKey = (x,y)=> [x,y].join('_')之类的方法抽象索引查找）

诀窍是保持单位顺序，因此任何单位的位置发生变化时，都需要更新前一个和最后一个位置。可以在仅跟踪具有多个单元的图块的情况下进行优化，并通过一种处理丢失位置键的方法来抽象查找。限制使用 Vue 的响应性也可能是值得的，因为它可能会增加不需要的开销（YMMV）；例如，如果您依赖于更改，而不是使unitOrder 反应，您可以做一个反应outsideUnitsChanged = ref(0) 变量，只要有实质性的变化就会不断增加。这将防止触发多次更新（当您从一个位置移除单元并再次添加它时）

希望这是有道理的。

TSU，我会让数据结构保持非反应性，并且只使用 Vue 作为一种表示数据的方式。

【讨论】：

谢谢，这听起来是个好主意，尽管我会使用地图而不是对象。我只需要在上面有城镇的瓷砖上使用这个 unitOrder，所以这不应该是一个很大的开销。关于反应性，这是我绝对需要随着时间的推移而研究的事情。目前几乎所有东西都是被动的，正如你所说，这可能会导致一些开销，比如在我的情况下，只是切换需要拼接和不移位的位置。
我现在遇到了保持此地图最新的问题。我目前的解决方案远非最佳，因为我检查每个单位转弯是否旧坐标有一个城镇，因此需要从本地地图中删除；反之亦然，我需要将新坐标添加到地图中。