如何更新 vuex 存储数组中的对象？

Posted 2023-02-22

【中文标题】如何更新 vuex 存储数组中的对象？

【英文标题】：How to update object in vuex store array?

【发布时间】：2019-09-10 21:39:07

【问题描述】：

我对 vue/vuex/vuetify 还是很陌生，但开始掌握它的窍门。 我有一个问题，虽然我无法正确解决。

我的商店中有一系列“项目”。通过突变删除和添加项目到商店时，更改会正确反映在将数组作为属性引用的子组件中。

但是，即使我可以看到存储中的数组已更新，对数组中项目的更改也不会反映出来。

我让它通过更新操作“工作”的唯一方法是：

将项目从store中的数组中移除，然后添加

使用与上面描述的完全相同但类似的代码：

state.categories = [
...state.categories.filter(element => element.id !== id),
category
]

但是上述两种方法的问题是数组的顺序发生了变化，我真的很想避免这种情况..

那么基本上，我将如何重写下面的变异方法以使状态反映到子组件并保持数组的顺序？

 updateProject(state, project) 

        var index = state.projects.findIndex(function (item, i) 
            return item.id === project.id;
        );

        state.projects[index] = project;
    

【参考方案1】：

您可以使用slice 将编辑后的项目注入正确的位置：

updateProject(state, project) 

  var index = state.projects.findIndex(function(item, i) 
    return item.id === project.id;
  );

  state.projects = [
    ...state.projects.slice(0, index),
    project,
    ...state.projects.slice(index + 1)
  ]

或者您可以使用JSON.parse(JSON.stringify()) 制作对象的深层副本

updateProject(state, project) 

  var index = state.projects.findIndex(function(item, i) 
    return item.id === project.id;
  );

  state.projects[index] = project;
  state.projects = JSON.parse(JSON.stringify(state.projects))