programing

스토어 Vuex에서 항목 삭제

firstcheck 2022. 8. 8. 15:30
반응형

스토어 Vuex에서 항목 삭제

저희 가게에 있는 아이템을 삭제하고 싶습니다.이 솔루션 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)
  }

도와주셔서 감사합니다.

코드에 두 가지 문제가 있습니다.

첫 번째 문제

commit함수는 2개의 파라미터만 받습니다.

  1. commit name (String으로 지정)
  2. 페이로드 Pbject

그래서 여러 개의 소품을 건네고 싶으면 물건으로 넘겨야 한다.

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 of tests 개체를 얻어야 합니다.

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)테스트를 삭제하다

언급URL : https://stackoverflow.com/questions/66780445/deleting-an-item-in-the-store-vuex

반응형