如何在 Vue.js 中保持反應性的同時使用鍵推送到 js 數組？

Question

如果我的狀態有一個數組：

  state: {
    users: []
  },

我有這樣的對象：

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

我將它們添加到像users.push(user);這樣的 mutator 中的商店。 . 如何將它添加到users數組中，而不是0:{...}它最終使用真實id作為鍵1:{...} ？

我知道我可以做類似users[user.id] = user的事情，但我認為這在Vue.js中不會是被動的

Answer 1

如果您想按 id 查找數組，則數組可能是錯誤的數據結構。 users: {} 。 僅當 id 之間的間隙相對較少時，數組才真正合適。

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

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

如果您決定堅持使用數組，那么還有其他選項， https://v2.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過濾該數組。