传播运算符不适用于 vuex 突变答案

【问题标题】：Spead operator does'nt work on vuex mutations传播运算符不适用于 vuex 突变
【发布时间】：2023-05-09 20:29:01
【问题描述】：

我不能在 nuxt 上的 vuex 变异中使用扩展运算符。

突变：

EDIT_BALLOON(state, data) {
const index = state.list.findIndex(item => item._id === data._id);
    //state.list[index] = {...data} // not works
    Object.assign(state.list[index], data); **// works**
  },

行动：

async editBalloon( store, form ){ 
    const { data } = await this.$axios.post('balloon-service/balloon/edit', form );
    store.commit('EDIT_BALLOON', data);
  }

奇怪地导入 vuex 助手的工作方式类似于 { ...mapState, ...mapMutations }

有什么解决办法吗？提前致谢

【问题讨论】：

Vuex 助手是另一回事。你想通过解构来实现什么？你能给我们一个输入和期望输出的例子吗？
mutation 不适用于扩展运算符，我添加了函数。谢谢
你能提供一些数据结构吗？在这里，我不知道您使用的输入是什么。

标签： nuxt.js vuex spread

【解决方案1】：

哦，我对这里的问题理解得更好了，这实际上是 Vue2（本质上是 JS 本身）的一个警告，您可以在这里找到更多信息：https://vuejs.org/v2/guide/reactivity.html#For-Objects

您实际上可以使用this.$set(state.list, data, index) 而不是Object.assign(state.list[index], data)，但它实际上实现了相同的结果。

【讨论】：

所以这是常见问题？
这基本上就是 JS 的工作方式。 Proxies 可以帮助绕过这个警告，它实际上在 Vue3 中使用。但是 Vue2 和普通的 JS，你需要这样做。