반응형
복사된 데이터가 변경될 때 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
반응형
'sourcecode' 카테고리의 다른 글
Linux에서 비동기 신호 핸들러는 어떻게 실행됩니까? (0) | 2022.07.23 |
---|---|
math.h 헤더를 포함했는데도 "undefined reference to sqrt" 오류가 발생하는 이유는 무엇입니까? (0) | 2022.07.23 |
특정 gcc 컴파일러의 glibc 버전을 확인합니다. (0) | 2022.07.17 |
.$mount()와 el의 차이 [Vue JS] (0) | 2022.07.17 |
Vue-Nuxt:생성된 HTML이 올바르게 표시되지 않는 이유는 무엇입니까? (0) | 2022.07.17 |