Vuex - 更新数组内的整个对象答案

【问题标题】：Vuex - Update entire object inside arrayVuex - 更新数组内的整个对象
【发布时间】：2019-03-21 19:16:43
【问题描述】：

在我的Vuex突变中，我想替换我状态中的一个数组元素，如下所示：

UPDATE_MAILING(state, mailing) {
    let index = _.findIndex(state.mailings, {id: mailing.id});

    state.mailings[index] = mailing
}

但这不会更新绑定到该数组的模板。如何响应式更新数组元素？

【问题讨论】：

您可以在 getter 内部执行相同的操作，而不是在变异内部执行此操作！
据我了解，如果您的数组（内部状态）发生任何更改，它应该在您的模板 html 中自动更新。为了实现这一点，无论您想更改哪个数组，都可以从计算函数中的状态获取该数组。（在计算中，只要它的依赖（这里是你的数组）发生变化，它就会自动更新模板 html）
此链接可能会有所帮助。 vuejs.org/v2/guide/computed.html#Basic-Example
你能告诉我我的评论有帮助吗？我是否正确理解了问题？

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

您应该在 Vue 实例中使用 Vue.$set（或 this.$set）：

UPDATE_MAILING(state, mailing) {
    let index = state.mailings.findIndex(item => item.id === mailing.id)
    Vue.$set(state.mailings, index, mailing)
}

文档：Vue.js → Reactivity in Depth

【讨论】：

【解决方案2】：

如docs 中所述，您可以使用Array.prototype.splice() 或Vue.set() 响应式替换数组项：

mutations: {
  UPDATE_MAILING(state, mailing) {
    const index = state.mailings.findIndex(x => x.id === mailing.id)
    state.mailings.splice(index, 1, mailing)

    // OR:
    Vue.set(state.mailings, index, mailing)
  }
}

我更喜欢这里的splice，因为它不需要导入Vue，这也更容易测试。

demo

【讨论】：

使用这个和Vue.$set有什么区别？
这只是一种替代方法，如docs 中所述。我更喜欢这里的splice，因为它不需要导入Vue，这样也更容易测试。