Question

我对vue / vuex / vuetify还是很陌生，但是开始了解它了。我有一个问题，尽管我无法正确解决。

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

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

我通过更新操作使其“起作用”的唯一方法是：

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

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

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存储数组中的对象？

1 个答案: