Vuex에 저장된 어레이에서 로컬 어레이를 편집하는 방법

Vuex에 저장된 어레이에서 로컬 어레이를 편집하는 방법

Vuex에서 어레이를 추출하여 로컬로 편집하려고 합니다.

1. Vuex 어레이를 변경하지 않고 변경 내용을 무시합니다.
2. 로컬 변경을 (백엔드에) 송신합니다.

이 시점에서 로컬 어레이를 편집하면 Vuex의 어레이도 갱신됩니다.이는 원하지 않습니다.

폼의 데이터를 편집하고 (제출하지 않고) 되돌리면 로컬 어레이만 수정하는 것이 아니라 Vuex의 어레이를 통해 변경 내용이 전달됩니다.

코드 요약:

스토어:

 var app = new Vue({
        el: "#app",
        store: new Vuex.Store({
          state: {
            details: [ /* data */ ]
          }
        })
      });

HTML:

주의: 편집하기 전에 기본값을 확인할 수 있습니다.

    <b-form>
     // I'm using the item and index later on
     <div v-for="(item, index) in data">
       // Just want to see what the default values are before editing
       <b-form-input v-model="form.title"></b-form-input>
     </div>
    </b-form>

스크립트:

  data() {
    return {
      data: null,
      form: null
    }
  },
  beforeMount() {
    this.data = [...this.$store.state.details]
    this.form = this.data[0];
  }

코드를 개선하여 로컬에서 변경할 수 있도록 하려면 어떻게 해야 합니까?

JSON 구문 분석 및 Stringify를 사용하여 반응성이 없는 Vuex 상태의 로컬 복사본을 만듭니다.

  beforeMount() {
    this.data = [...this.$store.state.details]
    this.form = JSON.parse(JSON.stringify(this.data[0]));
  }

이는 어레이 참조만 복제하고 내부의 오브젝트는 복제하지 않기 때문입니다.그것은 'Shallow copy'라고 불립니다.이 문제를 해결하는 가장 쉬운 방법은 매핑입니다.details어레이 및 내부 객체 클론 작성.

this.data = this.$store.state.details.map(i => Object.assign({}, i));

언급URL : https://stackoverflow.com/questions/61130503/how-to-edit-local-array-from-array-stored-in-vuex