Vuex - 계산 된 속성 "name"이 (가) 할당되었지만 설정자가 없습니다

Question

일부 유효성 검사가 포함 된 구성 요소가 있습니다. 그것은 다단계 체크 아웃 양식입니다. 아래 코드는 첫 단계입니다. 사용자가 텍스트를 입력하고 이름을 전역 상태로 저장 한 후 다음 단계로 보내는지 확인하고 싶습니다. 나는 vee-validate을 사용하고 내가 주문 상태를 처리하고 이름을 기록하는 상점이

<template> 
<div> 
    <div class='field'> 
     <label class='label' for='name'>Name</label> 
     <div class="control has-icons-right"> 

      <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last"> 
      <span class="icon is-small is-right" v-if="errors.has('name')"> 
       <i class="fa fa-warning"></i> 
      </span> 
     </div> 
     <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p> 

    </div> 
    <div class="field pull-right"> 
     <button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button> 
    </div> 
</div> 
</template> 

<script> 
export default { 
    methods: { 
     nextStep(){ 
      var self = this; 

      // from baianat/vee-validate 
      this.$validator.validateAll().then((result) => { 
       if (result) { 
        this.$store.dispatch('addContactInfoForOrder', self); 
        this.$store.dispatch('goToNextStep'); 
        return; 
       } 
      }); 
     } 
    }, 
    computed: { 
     name: function(){ 
      return this.$store.state.name; 
     } 
    } 
} 
</script> 

을 vuex하고있다. 궁극적으로 나는 다중 단계 양식에서 모든 정보를 서버로 보내고 싶습니다. 이 코드를 실행하면

export default { 
    state: { 
    name: '', 
    }, 

    mutations: { 
    UPDATE_ORDER_CONTACT(state, payload){ 
     state.name = payload.name; 

    } 
    }, 

    actions: { 
    addContactInfoForOrder({commit}, payload) { 
     commit('UPDATE_ORDER_CONTACT', payload); 
    } 
    } 
} 

나는 Computed property "name" was assigned to but it has no setter.

가 어떻게 글로벌 상태로 이름 필드의 값을 결합 않는 오류가? 나는 이것이 계속되어서 사용자가 ("다음 단계"를 클릭 한 후) 단계를 되돌려도이 단계에서 입력 한 이름을 볼 수 있습니다.

Answer 1

v-model으로 가면 계산할 수 있습니다. setter이 필요합니다. 업데이트 된 값으로 무엇을 하든지간에 (아마도 $store으로 작성하십시오. getter가 가져온 것임을 감안할 때) setter에서 할 수 있습니다.

양식을 제출하여 상점에 다시 쓰려면 v-model을 원하지 않으므로 :value으로 설정하면됩니다.

양식 제출까지 $store의 소스를 덮어 쓰지 않고 어딘가에 저장되는 중간 상태를 원할 경우 이러한 데이터 항목을 만들어야합니다.

Answer 2

로이 J의 대답 외에도, 설정자가없는 계산에서 v-for을 사용하면이 경고도 throw하는 것처럼 보입니다.