Vuex：提交一个对象，然后通过 ID 找到它答案

【问题标题】：Vuex: committing an object then finding it by IDVuex：提交一个对象，然后通过 ID 找到它
【发布时间】：2020-01-14 20:28:38
【问题描述】：

我正在尝试使用此方法将某些内容提交到我的 Vuex 状态。

getVariableLookup: ({ commit, _state }, payload) => {
  http.get(`/frame_variables/${payload}`)
    .then(response => {
      commit('addVariableLookup', response.data.frame_variable.body)
    })
}

这很好用，但我想将payload 与响应一起存储。我似乎无法将它作为这样的对象提交。

commit('addVariableLookup', { id: payload, body: response.data.frame_variable.body })

那个方法返回这个：

更新

原来它设置的数据很好，我只是无法用这段代码检索它：

const body = this.variableLookups.find(x => x.id === v.v_id)

this.variableLookups 全部返回。如何找到单个对象？

【问题讨论】：

您如何定义addVariableLookup 突变？另外，如果你使用 vue-devtools，你能看到突变火吗？
这里不一定有什么问题。 Getter & Setter 只是意味着这些属性定义了 JS 的 getter 和 setter，这是意料之中的，因为 Vue 将它们添加为反应性系统的一部分。如果您展开这些对象，您应该会发现其中隐藏着正确的值。
我的错，将更新问题。 vue-devtools 告诉我我得到了正确的数据。

标签： ecmascript-6 vuejs2 vuex

【解决方案1】：

获取相关 id 的 body 应该只是：

const entry = this.variableLookups.find(x => x.id === v.v_id)
const body = entry ? entry.body : null

是否需要三元/null 取决于您是否已经有逻辑来防止这种情况发生。在尝试抓取数据之前，您需要小心等待操作加载数据。

使用对象将 id 映射到主体而不是使用数组可能会更好地实现您正在做的事情。向对象添加属性的常见警告适用。

【讨论】：

> ... 等到操作加载数据后... 我什么时候可以学习？谢谢。