Vue 및 Vuex: 뷰 변경에 따라 상태 업데이트

Vue 및 Vuex: 뷰 변경에 따라 상태 업데이트

난 지금 이 빌딩을

양식을 렌더링하는 응용 프로그램. 기본 입력 값은 저장소의 데이터와 동일합니다.

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

현재 입력은 스토어 데이터에 바인딩되어 있기 때문에 입력의 "라이브" 값은 참조할 수 없습니다.사용자가 [Save]를 클릭했을 때, 「live」값을 취득하려면 어떻게 해야 합니까?

컴포넌트 템플릿

<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;
  }
}

잠재적인 솔루션

스토어의 "클론"을 생성하여 입력을 복제된 항목 데이터에 바인딩할 수 있다고 생각했습니다.그러면 뷰가 변경되면 이 오브젝트가 갱신되므로 이러한 "라이브" 값을 가져와 뷰에서 스토어로 데이터를 커밋할 수 있습니다.이게 좋은 해결책인가요?

사용자가 버튼을 클릭하지 않고 업데이트하고 싶다면 문서에서 설명하는 방법 중 하나를 제안합니다.

단, 버튼을 클릭할 때는, 다음과 같은 조작을 실시합니다.

<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>

언급URL : https://stackoverflow.com/questions/46757552/vue-and-vuex-updating-state-based-on-changes-to-the-view