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

Question

我是 vue/vuex/vuetify 的新手，但已经开始掌握窍门了。我有一个问题，但我一直无法正确解决。

我的商店里有一组 "projects"。当通过突变在商店中删除和添加项目时，更改会正确反映在引用数组的子组件中作为属性.

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

我通过更新操作达到 "work" 的唯一方法是：

从商店的数组中删除项目，然后添加它

使用与上述完全相同的代码，但像这样：

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;
    }

Answer 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))
}

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

How to update object in vuex store array?

arrays

store

vuex