뷰와 Vuex는 : 뷰

Question

변경에 따라 상태를 업데이트 나는

기본 입력 값이 저장소에서 데이터를 동일한 형태를, 렌더링 응용 프로그램을 구축하기 위해 노력하고있어.

저장 버튼을 클릭하면 사용자가보기에 추가 한 새 데이터에 따라 상태가 업데이트됩니다.

현재 입력 값은 상점 데이터에 바인딩되어 있으므로 입력 값의 "실제 값"에 대한 참조가 없습니다. 사용자가 저장을 클릭하면 어떻게 "실제"값을 가져 옵니까?

구성 요소 템플릿

<input type="text" class="form-control" :value="item.name"> 
<input type="text" class="form-control" :value="item.price"> 
<button class="btn btn-primary" v-on:click="updateItem(item)">Save</button> 

구성 요소

data: function() { 
    return {} 
}, 
methods: { 
    updateItem(item) { 
    this.$store.commit('updateItem', item); 
    }, 
}, 
computed: { 
    items() { 
    return this.$store.getters.getItem; 
    } 
} 

잠재적 인 솔루션

는 내가 아마도 저장소의 "복제"를 생성하고 바인딩 수 있다고 생각 복제 된 입력에 대한 입력 em 데이터. 그런 다음이 객체는 뷰가 변경 될 때마다 업데이트되므로 해당 "라이브"값을 가져 와서 뷰의 데이터를 저장소로 커밋 할 수 있습니다. 이것은 좋은 해결책입니까?

Answer 1

사용자가 버튼을 클릭하지 않고 업데이트하려면 one of the methods explained in the docs을 제안합니다.

그러나 당신이 그것을하고 싶지 이후 원자바오 그들은 버튼을 클릭하여이 같은 시도 :

<template> 
    <form> 
     <input type="text" class="form-control" v-model="item.name"> 
     <input type="text" class="form-control" v-model="item.price"> 

     <button class="btn btn-primary" @click.prevent="updateItem">Save</button> 
    </form> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      item: { 
       name: null, 
       price: null, 
      } 
     } 
    }, 

    mounted() { 
     // Set the default value of this.item based on what's in the store 
     this.item = this.$store.getters.getItem 
    }, 

    methods: { 
     updateItem() { 
      this.$store.commit('updateItem', this.item); 
     } 
    } 
} 
</script>