Как нажать на массив JS с ключом, оставаясь при этом реактивным в Vue.js?

Question

Если у меня есть массив в моем состоянии:

  state: {
    users: []
  },

И у меня есть такие объекты, как:

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

Я добавляю их в магазин в мутаторе типа users.push(user);. Как я могу добавить его в массив users, чтобы вместо 0:{...} он заканчивался использованием действительного id в качестве ключа 1:{...}?

Я знаю, что мог бы сделать что-то вроде users[user.id] = user, но я думаю, что это не будет реактивным в Vue.js

Answer 1

Массив, вероятно, неправильная структура данных, если вы хотите искать их по идентификатору. Скорее всего, вы хотите объект, users: {}. Массив будет действительно уместным, только если между идентификаторами будет относительно мало разрывов.

Чтобы значения были реактивными, вы должны использовать 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), когда вам нужен массив. И геттеры, и вычисляемые свойства кэшируются, поэтому накладные расходы (которые в любом случае довольно малы) будут возникать только при изменении пользователей. Затем этот массив можно отфильтровать с помощью filter.