Vuex-계산 된 속성“name”이 할당되었지만 setter가 없습니다.

Vuex-계산 된 속성“name”이 할당되었지만 setter가 없습니다.

---

양식 유효성 검사가있는 구성 요소가 있습니다. 다단계 결제 양식입니다. 아래 코드는 첫 번째 단계입니다. 사용자가 텍스트를 입력했는지 확인하고 이름을 전역 상태에 저장 한 다음 다음 단계로 전송하고 싶습니다. vee-validate 및 vuex를 사용 하고 있습니다.

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

주문 상태를 처리하고 이름을 기록하는 상점이 있습니다. 궁극적으로 다단계 양식의 모든 정보를 서버로 보내고 싶습니다.

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.

이름 필드의 값을 전역 상태에 어떻게 바인딩합니까? 사용자가 한 단계 뒤로 이동하더라도 ( "다음 단계"를 클릭 한 후)이 단계에서 입력 한 이름을 볼 수 있도록이 정보가 지속적으로 유지되기를 바랍니다.

---

If you're going to v-model a computed, it needs a setter. Whatever you want it to do with the updated value (probably write it to the $store, considering that's what your getter pulls it from) you do in the setter.

If writing it back to the store happens via form submission, you don't want to v-model, you just want to set :value.

If you want to have an intermediate state, where it's saved somewhere but doesn't overwrite the source in the $store until form submission, you'll need to create such a data item.

---

For me it was changing.

this.name = response.data;

To what computed returns so;

this.$store.state.name = response.data;

참고URL : https://stackoverflow.com/questions/46106037/vuex-computed-property-name-was-assigned-to-but-it-has-no-setter