vue.js - 删除 Vuex 商店中的商品

Question

我想删除我商店中的商品。 我看到了这个解决方案https://stackoverflow.com/a/59686164/11984242这似乎是我正在寻找的东西，但我的对象中有另一个“级别”，所以我不知道如何从子级别删除元素。

我的数据的结构。

{
    id: 1,
    name: 'My customer one',
    projects: [
        {
            id: 1,
            name: 'name',
            tests: [
                {
                    id: 1,
                    name: 'name test'
                },
                {
                    id: 2,
                    name: 'name test 2'
                }
            ]
        },
        {
            id: 2,
            name: 'other name'
        }
    ]
}

所以我了解如何使用上面的链接删除项目。但如何删除一行测试呢？

我在我的 vue 中这样做:

this.$store.commit("deleteTest", this.idProject, e)

这在我的商店里:

deleteTest(state, {data, e}) {
    const allTestsOfProject = state.listProjects.projects.find(p => p.id === data)
    console.log("all", allTestsOfProject)
    const oneTest = allTestsOfProject.studies.find(q => q.id === e)
    console.log("one test", oneTest)
    //state.listProjects.projects.splice(oneTest, 1)
  }

非常感谢您的帮助

Answer 1

您的代码有两个问题:

第一个问题

commit 函数仅需要 2 个参数:

1. 提交名称(字符串形式)
2. 有效负载项目

所以如果你想传递多个 props，你应该将它们作为对象传递

this.$store.commit("deleteTest", this.idProject, e) // WON'T WORK
this.$store.commit("deleteTest", {data: this.idProject, e}) // WILL WORK

现在您可以调用deleteTest(state, {data, e})

第二个问题

您应该获取测试对象的INDEX，而不是OBJECT本身

const oneTest = allTestsOfProject.studies.find(q => q.id === e) // WON'T WORK
const oneTest = allTestsOfProject.studies.findIndex(q => q.id === e) // WILL WORK

现在您可以调用:allTestsOfProject.studies.findIndex (q => q.id === e) 来删除您的测试