如何在vuex商店数组中更新对象？

Question

我对vue / vuex / vuetify很新，但开始掌握它。我有一个问题，虽然我无法正确解决。

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

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

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

1. 从商店中的数组中删除项目，然后添加它
2. 使用与上述完全相同的代码，但是如下所示：

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