Deleting an item in the store Vuex

Question

I would like to delete an item that is located in my store. I saw this solution https://stackoverflow.com/a/59686164/11984242 which seems to be what I'm looking for BUT I have another "level" in my object so I don't know how to delete an element from a sub-level.

The structure of my data.

{
    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'
        }
    ]
}

So I see how to delete a project with the link above. But how to delete one row of tests ?

I do this in my vue :

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

And this in my store :

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

Thanks a lot for help

No error : this code deleted the entire project instead just the test item with id 1 for example. — chtouk, Mar 24 '21 at 13:41
does `console.log(oneTest)` work fine? does it console the right test — Kareem Dabbeet, Mar 24 '21 at 13:45
I think I did not do well: I had tried directly in my template Vue; I had my good data in my console log. But when I passed my function in the store, it doesn't work anymore. I think I have problems with the payload data because it doesn't recognize anything anymore. I edited my question for more clarity. — chtouk, Mar 24 '21 at 14:04
Does not work : the console.log("all", allTestsOfProject) render "undefined" ... I think he does not take my payload — chtouk, Mar 24 '21 at 14:16
change `this.$store.commit("deleteTest", this.idProject, e)` to `this.$store.commit("deleteTest", {data: this.idProject, e})` — Kareem Dabbeet, Mar 24 '21 at 14:28
I change with this : this.$store.commit("deleteStudie", {data : this.idProject, test :e}) and in my store deleteStudie(state, {data, test}) { ... So know, my two console.log have the good data. But when I click to delete, it is always the first Test how is deleted instead of the test with the good ID allStudieOfProject.studies.splice(oneStudie, 1) — chtouk, Mar 24 '21 at 14:33
Yah now it is always the first test and not the test with the good id who is deleted ... :( — chtouk, Mar 24 '21 at 14:35
When I log "oneTest" it is the good one ... But when I splice, it 's not I don't understand. It is always the first of the list... — chtouk, Mar 24 '21 at 14:37
change `find` into `findIndex` so it'll be `allTestsOfProject.studies.findIndex (q => q.id === e)` — Kareem Dabbeet, Mar 24 '21 at 14:39

Kareem Dabbeet · Accepted Answer · 2021-03-24T15:30:13.650

You Have two problem with your code:

First Problem

commit function takes only 2 params:

commit name ( as String )
Payload Pbject

so if you want to pass multiple props you should pass them as an object

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

now you can call deleteTest(state, {data, e})

Second Problem

you should get the INDEX of tests object not the OBJECT itself

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

now you can call: allTestsOfProject.studies.findIndex (q => q.id === e) to delete your test

Deleting an item in the store Vuex

1 Answers1

First Problem

Second Problem