时间戳

首页 > 解决方案 > 如何在 Vue.js 中保持反应性的同时使用键推送到 js 数组？

javascript - 如何在 Vue.js 中保持反应性的同时使用键推送到 js 数组？

问题描述

如果我的状态有一个数组：

  state: {
    users: []
  },

我有这样的对象：

{
  id: 1,
  name: "some cool name"
}

我将它们添加到存储中的 mutator 中，例如users.push(user);. 如何将它添加到users数组中，而不是0:{...}最终使用实数id作为键1:{...}？

我知道我可以做类似的事情，users[user.id] = user但我认为这不会是被动的Vue.js

标签： javascriptarraysvue.jskeyvuex

解决方案

如果您想按 id 查找数组，则数组可能是错误的数据结构。更有可能你想要一个对象，users: {}. 仅当 id 之间的间隙相对较少时，数组才真正合适。

为了使您使用的值保持反应性Vue.set，https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats。因此，使用您的示例将是：

Vue.set(users, user.id, user)

如果您决定坚持使用数组，那么还有其他选项，https://vuejs.org/v2/guide/list.html#Caveats，例如splice.

在 Vuex 中规范化数据的相关阅读：https ://forum.vuejs.org/t/vuex-best-practices-for-complex-objects/10143

更新：

根据您对需要基于键的查找和过滤的评论，我的建议是使用对象存储值，然后Object.values(users)在您需要数组时创建一个 getter 或计算属性。getter 和计算属性都被缓存，因此开销（无论如何都非常小）只会在用户更改时产生。然后可以使用过滤该数组filter。

推荐阅读