Vuejs 2, VUEX, 데이터 편집시 데이터 바인딩

Question

나는 사용자 프로필 섹션과 사용자가 자신의 정보를 편집 할 수있게하려고합니다. vuex를 사용하여 사용자 프로필 데이터를 저장하고 양식으로 가져옵니다. 편집 양식은 userProfile 구성 요소의 하위 구성 요소에 있습니다. 데이터 저장을로드하면 VUEX에 커밋됩니다.

VUEX의 데이터로 양식을 채울 수 있지만 양식의 값을 변경하면 부모 구성 요소의 값도 변경됩니다.

양식이 저장 될 때까지 VUEX에 변경 사항을 적용하지 않으므로 데이터가 VUEX에 양방향으로 바인딩된다는 의미입니다. 나는 이것이 가능하지 않다는 인상하에 있었다. 이 경우 사용자가 일부 데이터를 변경 한 다음 실제로 "저장"을 클릭하지 않고 탐색하면 데이터가 여전히 변경됩니다.

참고 : 이것은 단순화 된 예입니다. 실제로 자식 구성 요소를로드하기 위해 라우터보기를 사용하거나, 소품을 통해 데이터를 전달합니다. 내가 아래에있는 것처럼 직접 편집 - 프로필 구성 요소를로드 테스트, 나는 동일한 문제가 있습니다.

아래 코드를 참조하십시오. 왜 데이터가 상점으로 다시 전송되는지 확인할 수 없습니다. 어떤 도움이라도 대단히 감사합니다.

<template> 
    <div class="content"> 
     <h1>{{getUserDetails.firstname}} {{getUserDetails.lastname}} </h1> 
     <edit-profile></edit-profile> 
    </div> 
</template> 
<script> 
    import { mapGetters } from 'vuex'; 
    import EditProfile from './Edit.vue'; 

    export default { 
     data() { 
      return { 
       // data 
      } 
     }, 
     created() { 
      this.fetchData(); 
     }, 
     components: { 
      EditProfile:EditProfile 
     }, 
     computed: mapGetters([ 
      'getUserDetails' 
     ]), 
     methods: { 
      fetchData: function() { 
       var _this = this; 
       // ajax call - then 
       _this.$store.commit('setData', { 
        name: 'userDetails', 
        data: response.data.data.userDetails 
       }); 
      } 
     } 
    } 
</script> 

이 결과를로드하고 가게에서 그들을 저장하고 잘 작동 : 부모에

, 정말 같은 사용자 데이터를 검색 설정합니다.

내 상점이 있습니다 여기

const store = new Vuex.Store({ 
    state: { 
     userDetails: {} 
    }, 
    mutations: { 
     setData(state, payload){ 
      state[payload.name] = payload.data; 
     } 
    }, 
    getters: { 
     getUserDetails: state => { 
      return state.userDetails; 
     } 
    } 
} 

모두가 노력하고 있습니다. 편집 양식 내 아이 구성 요소에서

, 나는 다음과 같은 양식을 채우는 오전 :

<template> 
    <form> 
     <label>Name</label> 
     <input name="firstname" v-model="profile.firstname"> 
     <input name="lastname" v-model="profile.lastname"> 
     <button v-on:click="save">submit</button> 
    </form> 
</template> 

<script> 
import {mapGetters } from 'vuex'; 

export default { 
    data() { 
     return { 
      profile:{} 
     } 
    }, 
    watch: { 
     getUserDetails (newData){ 
      this.profile = newData; 
     } 
    }, 
    created(){ 
     this.profile = this.$store.getters.getUserDetails; 
    }, 
    computed: mapGetters([ 
     'getUserDetails' 
    ]), 
    methods:{ 
     save(){ 
      var _this = this; 
      // ajax call to POST this.profile then 
      _this.$store.commit('setData', { 
       name: 'userDetails', 
       data: this.profile 
      }); 
     } 
    } 
} 
</script> 

Answer 1

당신이 개체를 복제하고의 로컬 버전을 사용할 수 있습니다 vuex와 비 결합 액을 찾고 있다면 제출할 때보다 v-model을 사용하십시오. 당신의 생성주기 기능에

이 작업을 수행 : 로컬 속성에 바인딩 개체를 수신하고 : 당신을 위해 예상대로 작동하지 않는 생각 왜

created(){ 
    this.profile = Object.assign({}, this.$store.getters.getUserDetails); 
}, 

Answer 2

. 그런 다음 해당 로컬 속성을 변경하면 개체 포인터 (/ 메모리 주소)에 의해 저장소 객체에 바인딩됩니다. 새 개체를 만들고 상태의 사용자 프로필 개체의 속성을 기반으로 새 개체의 속성을 설정하면 트릭을해야합니다. 새 개체는 메모리에 자체 주소가 있으므로 다른 장소를 가리 킵니다.

그림 :

created(){ 
    // create a new object with {...} 
    this.profile = { 
     // assign values to properties of same name 
     firstName: this.$store.getters.getUserDetails.firstName, 
     lastName: this.$store.getters.getUserDetails.lastName, 
    }; 
}, 

그러나 이러한 속성 (이름, 성)은 (메모리 주소에 대한 포인터에 의해 액세스 무엇이든) 객체 나 배열 인 경우는이 중 하나가 작동하지 않을 것입니다.

---

너무 ...이 상황에서 나 자신을 할 가능성이 가장 높은 것은 다음과 같습니다.

data() { 
    return { 
     firstName: '', 
     lastName: '' 
    } 
}, 

로컬 속성을 정의합니다. 데이터를로드 할 때 Vuex 저장소에있는 프로필 데이터로 로컬 값을 채 웁니다.

created() { 
    let profile = this.$store.getters.getUserDetails; 
    if (profile.firstName && profile.lastName) { 
     this.firstName = profile.firstName; 
     this.lastName = profile.lastName; 
    } 
}, 

그런 다음 저장할 때 로컬 변수를 사용하여 저장소 값을 업데이트하십시오.

methods: { 
    save() { 
     let profile = { 
      firstName: this.firstName, 
      lastName: this.lastName 
     }; 

     // ajax call to POST this.profile then 
     this.$store.commit('setData', { 
      name: 'userDetails', 
      data: profile 
     }); 
    } 
} 

내 머리의 상단에서이 쓰고 있어요, 그래서 거기에 버그 또는 여기에 오타 수도 있습니다 ...하지만 나는 적어도 희망 내 논리는 당신에게 올바른 ;-P 명확입니다 .

pro : 편집 된 정보를 저장할 준비가 될 때까지는 다른 곳에 반영하지 않습니다.

콘 : 사용자 프로필 미리보기 영역에서 임시 변경 사항을 반영해야하는 경우 앱의 구조에 따라 작동하지 않을 수 있습니다. 이 경우에 @input을 state.temporaryUserProfile 객체에 바인드하거나 저장할 수도 있습니다.

저는 아직 Vue.js를 처음 사용하고 2 주일 전에 사용하기 시작했습니다. 희망이 분명하고 정확합니다 :)