如何解决VueX 变异优化
我目前正在使用 VueX 商店，我有 1 个突变可以推送到整个数组。目前一切正常，但想知道我是否可以让这段代码更简单、更少行/同时更优化。 旁注，这些是存储在数组中的对象。
{"name":"Josh","city":"New York","Height":"5,9"}{"name":"Katty","city":"Los Angeles",6"}
解决方法
我的第一个想法是，如果将 slug 中的 data 与数组中每个对象中的 find 进行比较，它必须是唯一的（否则您将替换 slug 中的多个对象).
这意味着，如果您将状态的“根”作为数组切换到使用由 PUSH_TO_ALL: (state,data) => {
state.all[data.slug] = data
索引的对象，则几乎肯定可以使事情变得更快、更简单。
然后你的代码会变成这样：
slug这有两个优点——修改状态更简单、更快捷，因为如果对象已经存在，你不需要遍历所有状态检查。其次，不需要单独的代码来区分添加新对象和替换它（如果它已经存在）。
如果出于某种原因您必须将状态存储为数组，我将使用状态的不同部分来维护跟踪 PUSH_TO_ALL: (state,data) => {
if (state.map[data.slug]) {
state.all[state.map[data.slug]] = data
} else {
// Push returns length of array - index is len-1
state.map[data.slug] = state.all.push(data) - 1
}
到数组索引的对象。那么您的代码将类似于：
Vue.set()注意 - 在 Vue2 中，您可能需要使用 Documents> dir /a
:
2021-05-29 11:43 <JUNCTION> My Music [C:\Users\iggy\Music]
2021-05-29 11:43 <JUNCTION> My Pictures [C:\Users\iggy\Pictures]
2021-05-29 11:43 <JUNCTION> My Videos [C:\Users\iggy\Videos]
:
来更新嵌套对象，否则代码可能不会对这些更改做出反应。 Vue3 不再有这个限制。
您可以使用 Array.findIndex 代替 Array.find，并将其与三元组配对，以使琐碎的逻辑更简洁（尽管不一定更清晰）。
const mutations = {
PUSH_TO_ALL: (state,data) => {
const indexOfMatchingSlug = state.all.findIndex(one => one.slug === data.slug);
state.all[indexOfMatchingSlug] = data ? indexOfMatchingSlug > -1 : state.all.push(data);
}
}版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
