vuex 저장소 어레이에서 개체를 업데이트하는 방법

vuex 저장소 어레이에서 개체를 업데이트하는 방법

나는 vue/vuex/vuetify를 꽤 처음이지만, 점점 요령을 터득하고 있다.제대로 해결하지 못했는데 문제가 생겼어요.

제 가게에는 일련의 "프로젝트"가 있습니다.돌연변이를 통해 항목을 삭제하고 저장소에 추가하면 변경 내용이 배열을 속성으로 참조하는 하위 구성요소에 올바르게 반영됩니다.

그러나 스토어 내의 어레이가 갱신되어도 어레이 내의 아이템 변경은 반영되지 않습니다.

업데이트 액션을 사용하여 "작동"할 수 있는 유일한 방법은 다음 중 하나였습니다.

1. 스토어의 배열에서 프로젝트를 제거한 후 추가합니다.

2. 위에서 설명한 것과 동일하게 동작하는 코드를 사용합니다.

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

사용할 수 있습니다.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))
}

언급URL : https://stackoverflow.com/questions/55781792/how-to-update-object-in-vuex-store-array