sourcecode

복사된 데이터가 변경될 때 Vuex 상태를 변경하지 않고 Vuex 상태에서 Data로 값을 복사하려면 어떻게 해야 합니까?

copyscript 2022. 7. 17. 16:44
반응형

복사된 데이터가 변경될 때 Vuex 상태를 변경하지 않고 Vuex 상태에서 Data로 값을 복사하려면 어떻게 해야 합니까?

양식을 편집하려고 합니다.그래서 폼 정보를 저장하기 위해 Vuex를 사용하고 있으며 폼 자체는 하위 컴포넌트 내의 vuetify 대화상자에 있습니다.또, 소품을 사용해 다이얼로그를 열어 인덱스를 보냅니다.

편집 vue 데이터(tableUsulanTemp)를 vuex getters(tableUsulan) 값으로 다음과 같이 설정합니다.

  props: {
    value: false,
    index: null
  },
  model: {
    prop: "value",
    event: "editClicked"
  },
  // set vue data with vuex getters
  watch:{
    value:function(value){
      if(value){
        this.tableUsulanTemp = this.tableUsulan[this.$props.index];
      }else{
        this.tableUsulanTemp = {};
      }
    }
  },
  computed: {
    //here is the vuex getters
    ...mapGetters(["tableUsulan"]),
    editOverlay: {
      get: function() {
        console.log(this.value);
        return this.value;
      },
      set: function(value) {
        console.log("edit button clicked");
        this.$emit("editClicked", value);
      }
    }
  },
  data() {
    return {
      // here is vue data where i put the getters to
      tableUsulanTemp:{},
    };
  },

마크업:

<v-text-field
    label="Name"
    v-model="tableUsulanTemp.name"
>

그런 다음 사용자가 삭제 버튼을 클릭하여 변경 사항을 삭제하면 대화상자가 false로 설정되며, 편집 양식 데이터를 빈 개체로 재설정하기 위해 트리거 워처(위 코드 보기)가 표시됩니다.

discard(){
 this.editOverlay = false;
}

문제는 데이터가 폐기되지 않고 변경된 것입니다.vue 데이터의 정보를 변경하도록 사용자를 설정했는데 vuex에서도 변경되는 것 같습니다.이제 링크되어 있는 것 같은데 어떻게 링크를 해제할 수 있을까요?vue 데이터가 변경될 때 vuex를 변경하지 않고 vuex 상태를 vue 데이터로 만들려면 어떻게 해야 합니까?

따라서 이 솔루션은 객체를 json으로 해석한 후 되돌리는 것입니다.

this.tableUsulanTemp = JSON.parse(JSON.stringify(this.tableUsulan));

자세한 것은 이쪽입니다

언급URL : https://stackoverflow.com/questions/61530531/how-to-copy-value-from-vuexs-state-to-data-without-changing-the-vuexs-state-wh

반응형