删除商店 Vuex 中的项目答案

【问题标题】：Deleting an item in the store Vuex删除商店 Vuex 中的项目
【发布时间】：2023-11-05 14:33:02
【问题描述】：

我想删除位于我商店中的商品。我看到了这个解决方案https://*.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)
  }

非常感谢您的帮助

【问题讨论】：

能否添加运行解决方案时出现的错误
无错误：此代码删除了整个项目，而仅删除了 id 为 1 的测试项。
console.log(oneTest) 工作正常吗？它是否控制了正确的测试
我觉得我做得不好：我曾在我的模板Vue中直接尝试过；我的控制台日志中有很好的数据。但是当我在商店中传递我的功能时，它不再起作用了。我认为我的有效载荷数据有问题，因为它不再识别任何东西。为了更清楚，我编辑了我的问题。
请尝试：allTestsOfProject.tests.splice(oneTest, 1)

标签： vue.js nuxt.js vuex

【解决方案1】：

您的代码有两个问题：

第一个问题

commit 函数只需要 2 个参数：

提交名称（作为字符串）
有效负载对象

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

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) 删除您的测试

【讨论】：